写在前面

omi-cliOmi的命令行工具。在v0.1.X以及之前版本中,生成出来的项目脚手架

是基于webpack1的。由于:

  • webpack1不支持tree-shaking,webpack2 支持tree-shaking
  • webpack1不支持 sass-loader,webpack2 支持sass-loader

tree-shaking 作用是移除没有使用的代码有效的减小包体积

sass-loader 可以让你把sass转成css,在omi项目里可以把sass转成组件的局部CSS

所以,果断把omi-cli的项目模板升级为基于webpack2。感兴趣的同学可以立马尝试下。

$ npm install omi-cli -g       //安装cli
$ omi init your_project_name //初始化项目
$ cd your_project_name //转到项目目录
$ npm run dev //开发
$ npm run dist //部署发布

采坑之路

在升级的过程中遇到了不少问题,这里记录一下。

问题1

webpack2中,CommonsChunkPlugin不再支持上面的传参形式,必须传JSON形式。

问题2

webpack2中,不在允许省略-loader的形式标记loader,如:

 {test: /\.html$/, loader: "string"},

都要改成:

 {test: /\.html$/, loader: "string-loader"},

问题3

使用webpack-stream的同学可能会碰到上面这个错误。找了好久发现:

在gulp里要修改下第二个参数,把 null 改成 require('webpack')。

sass生成组件局部CSS

在传统的webpack项目脚手架中,都会包含css相关的三个loader:

// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
}]
}
};
  • sass-loader负责把sass编译成css
  • css-loader负责把编出来的css转成CommonJS模块用于js里面进行require获取
  • style-loader负责把css插入到页面的head里面

那么问题来了?Omi内部本身组件可以定义style方法,如:

class Hello extends Omi.Component {
...
style () {
return `
h1{
cursor:pointer;
}
`;
}
...
}

在Omi内部的管线里面,会把执行style方法,把返回的css转成局部css,然后插入到页面的head里面。所以和webpack三个loader里的管线有冲突!怎么解决?去掉一个loader便可!

// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
}]
}
};

我们只需要能够在js里动态获取到编译好的css字符串,然后拼在style方法里便可!两个管线就打通了!具体代码:

import Omi from 'omi';

const style = require('./index.scss');

class Header extends Omi.Component {
...
style () {
return style.toString();
}
...
} export default Header;

这里需要注意require到的style不是字符串对象,需要执行toString才能获取到css字符串。

相关

  • Omi的Github地址https://github.com/AlloyTeam/omi
  • 如果想体验一下Omi框架,可以访问 Omi Playground
  • 如果想使用Omi框架或者开发完善Omi框架,可以访问 Omi使用文档
  • 如果你想获得更佳的阅读体验,可以访问 Docs Website
  • 如果你懒得搭建项目脚手架,可以试试 omi-cli
  • 如果你有Omi相关的问题可以 New issue
  • 如果想更加方便的交流关于Omi的一切可以加入QQ的Omi交流群(256426170)

omi-cli新版发布-升级webpack2和支持sass生成组件局部CSS的更多相关文章

  1. 破界!Omi生态omi-mp发布,用小程序开发生成Web

    omi-mp 是什么 Omi 框架是微信支付线研发部和 AlloyTeam 开源的通用 Web 组件化框架,基于 Web Components,用来开发 PC.手机浏览器或者微信.手Q webview ...

  2. UCanCode发布升级E-Form++可视化源码组件库2015全新版 (V23.01)!

    2015年4月. 成都 UCanCode发布升级E-Form++可视化源码组件库2015全新版 (V23.01)! --- 全面性能提升,UCanCode有史以来最强大的版本发布! E-Form++可 ...

  3. UCanCode发布升级E-Form++可视化源码组件库2014 全新版 (V20.01)!

    UCanCode发布升级E-Form++可视化源码组件库2014 全新版 (V20.01)! --- UCanCode有史以来最强大的版本发布! E-Form++可视化源码组件库企业版本2014最新版 ...

  4. UCanCode发布升级E-Form++可视化源码组件库2018全新版 !

    2018年. 成都 UCanCode发布升级E-Form++可视化源码组件库2018全新版 ! --- 全面性能提升,UCanCode有史以来最强大的版本发布! E-Form++可视化源码组件库企业版 ...

  5. UCanCode发布升级E-Form++可视化源码组件库2020全新版 !

    2020年. 中国.成都 UCanCode发布升级E-Form++可视化源码组件库2020全新版 ! --- 全面性能提升,UCanCode有史以来最强大的版本发布! E-Form++可视化源码组件库 ...

  6. MWeb 1.3.7 发布!增加发布到 Wordpress 等支持 MetaWeblog API 的服务,如:Wordpress 博客、新浪博客、cnblogs、oschina。

    MWeb 1.3.7 版的新功能 增加发布到 Wordpress 等支持 Metaweblog API 的服务,目前经测试过的有: Wordpress 博客.新浪博客.cnblogs.oschina. ...

  7. CopyU!SW新版发布!

    CopyU!SW新版发布,版本号为:2.1.412.213 主要更新内容如下: 此版本(2.1.412.213)主要作了如下更新:        1.修复了CopyU!SW版本中的运行模式规则的设定错 ...

  8. 升级GCC以支持C++11

    本文主要介绍在Linux系统下,如何升级GCC以支持C++11.目前来看GCC是对C++11支持程度最高最多的编译器,但需要GCC4.8及以上版本.  本文使用操作系统:Centos 6.4 Desk ...

  9. Stimulsoft Reports送2年免费升级与技术支持

    慧都十年大促,与著名报表控件商Stimulsoft联合推出独家活动,即日起12月31日前,购买指定授权的Stimulsoft Reports除了获得本身1年的免费升级外,还加送2年免费升级与技术支持, ...

随机推荐

  1. 负载均衡软件LVS分析二(安装)

    一.  安装LVS软件 1.安装前准备工作操作系统:统一采用Centos4.4版本.地址规划,如表1所示:表1 更详细的信息如图2所示: 图2  LVS DR模式安装部署结构图 图2中的VIP指的是虚 ...

  2. PowerPoint实用知识

    纯手打,可能有错别字,使用的版本是office2013 转载请注明出处 http://www.cnblogs.com/hnnydxgjj/p/6347256.html ,谢谢 母版的使用 制作PPT的 ...

  3. 在C++中反射调用.NET(三)

    在.NET与C++之间传输集合数据 上一篇<在C++中反射调用.NET(二)>中,我们尝试了反射调用一个返回DTO对象的.NET方法,今天来看看如何在.NET与C++之间传输集合数据. 使 ...

  4. [CSS3] 学习笔记-背景与边框相关样式

    1.与背景相关的新增属性 包括:backgroud-clip,backgroud-origin,backgroud-size <!DOCTYPE html> <html> &l ...

  5. ArcGIS制图表达Representation实战篇1-边界线和行道树制作

    ArcGIS制图表达Representation实战篇1-边界线和行道树制作 by 李远祥 即便是有了一些制图表达的基础,很多人还是对ArcGIS制图表达理解停留在表面,因为没有实际的强化训练是很难体 ...

  6. 关于hashmap的底层实现

    注:以下内容并非基于最新的jdk版本 q1:hashmap为什么叫hashmap? 答:hashmap基于hashtable(不是hashtable类)实现. q2:hashtable(不是hasht ...

  7. mybatis入门-框架原理

    mybatis是什么 在说mybatis原理之前,我们有必要知道,mybatis到底是个什么东西.mybatis是一个持久层的框架.是一个不完全的ORM框架.因为它需要由程序员自己去写sql语句.但是 ...

  8. matlab中同一文件定义子函数的方法

    在matlab中一个.m文件中可以有多个的子函数,但仅能有一个主函数,并且M文件名必须和主函数相同在一个m文件中通常有两种定义子函数的方法: 1.嵌套定义 myfunc1会和主函数共享变量名.这种情况 ...

  9. asyncio

    一.简介 asyncio是Python 3.4版本引入的标准库,直接内置了对异步IO的支持. asyncio的编程模型就是一个消息循环.我们从asyncio模块中直接获取一个EventLoop的引用, ...

  10. c#生成动态库并加载

    下面这段代码生成dll文件,不能编译运行.点击项目右键,点击生成,这时会在debuge文件中生成相应的配置文件. using System; using System.Collections.Gene ...