omi-cli新版发布-升级webpack2和支持sass生成组件局部CSS
写在前面
omi-cli是Omi的命令行工具。在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的更多相关文章
- 破界!Omi生态omi-mp发布,用小程序开发生成Web
omi-mp 是什么 Omi 框架是微信支付线研发部和 AlloyTeam 开源的通用 Web 组件化框架,基于 Web Components,用来开发 PC.手机浏览器或者微信.手Q webview ...
- UCanCode发布升级E-Form++可视化源码组件库2015全新版 (V23.01)!
2015年4月. 成都 UCanCode发布升级E-Form++可视化源码组件库2015全新版 (V23.01)! --- 全面性能提升,UCanCode有史以来最强大的版本发布! E-Form++可 ...
- UCanCode发布升级E-Form++可视化源码组件库2014 全新版 (V20.01)!
UCanCode发布升级E-Form++可视化源码组件库2014 全新版 (V20.01)! --- UCanCode有史以来最强大的版本发布! E-Form++可视化源码组件库企业版本2014最新版 ...
- UCanCode发布升级E-Form++可视化源码组件库2018全新版 !
2018年. 成都 UCanCode发布升级E-Form++可视化源码组件库2018全新版 ! --- 全面性能提升,UCanCode有史以来最强大的版本发布! E-Form++可视化源码组件库企业版 ...
- UCanCode发布升级E-Form++可视化源码组件库2020全新版 !
2020年. 中国.成都 UCanCode发布升级E-Form++可视化源码组件库2020全新版 ! --- 全面性能提升,UCanCode有史以来最强大的版本发布! E-Form++可视化源码组件库 ...
- MWeb 1.3.7 发布!增加发布到 Wordpress 等支持 MetaWeblog API 的服务,如:Wordpress 博客、新浪博客、cnblogs、oschina。
MWeb 1.3.7 版的新功能 增加发布到 Wordpress 等支持 Metaweblog API 的服务,目前经测试过的有: Wordpress 博客.新浪博客.cnblogs.oschina. ...
- CopyU!SW新版发布!
CopyU!SW新版发布,版本号为:2.1.412.213 主要更新内容如下: 此版本(2.1.412.213)主要作了如下更新: 1.修复了CopyU!SW版本中的运行模式规则的设定错 ...
- 升级GCC以支持C++11
本文主要介绍在Linux系统下,如何升级GCC以支持C++11.目前来看GCC是对C++11支持程度最高最多的编译器,但需要GCC4.8及以上版本. 本文使用操作系统:Centos 6.4 Desk ...
- Stimulsoft Reports送2年免费升级与技术支持
慧都十年大促,与著名报表控件商Stimulsoft联合推出独家活动,即日起12月31日前,购买指定授权的Stimulsoft Reports除了获得本身1年的免费升级外,还加送2年免费升级与技术支持, ...
随机推荐
- 负载均衡软件LVS分析二(安装)
一. 安装LVS软件 1.安装前准备工作操作系统:统一采用Centos4.4版本.地址规划,如表1所示:表1 更详细的信息如图2所示: 图2 LVS DR模式安装部署结构图 图2中的VIP指的是虚 ...
- PowerPoint实用知识
纯手打,可能有错别字,使用的版本是office2013 转载请注明出处 http://www.cnblogs.com/hnnydxgjj/p/6347256.html ,谢谢 母版的使用 制作PPT的 ...
- 在C++中反射调用.NET(三)
在.NET与C++之间传输集合数据 上一篇<在C++中反射调用.NET(二)>中,我们尝试了反射调用一个返回DTO对象的.NET方法,今天来看看如何在.NET与C++之间传输集合数据. 使 ...
- [CSS3] 学习笔记-背景与边框相关样式
1.与背景相关的新增属性 包括:backgroud-clip,backgroud-origin,backgroud-size <!DOCTYPE html> <html> &l ...
- ArcGIS制图表达Representation实战篇1-边界线和行道树制作
ArcGIS制图表达Representation实战篇1-边界线和行道树制作 by 李远祥 即便是有了一些制图表达的基础,很多人还是对ArcGIS制图表达理解停留在表面,因为没有实际的强化训练是很难体 ...
- 关于hashmap的底层实现
注:以下内容并非基于最新的jdk版本 q1:hashmap为什么叫hashmap? 答:hashmap基于hashtable(不是hashtable类)实现. q2:hashtable(不是hasht ...
- mybatis入门-框架原理
mybatis是什么 在说mybatis原理之前,我们有必要知道,mybatis到底是个什么东西.mybatis是一个持久层的框架.是一个不完全的ORM框架.因为它需要由程序员自己去写sql语句.但是 ...
- matlab中同一文件定义子函数的方法
在matlab中一个.m文件中可以有多个的子函数,但仅能有一个主函数,并且M文件名必须和主函数相同在一个m文件中通常有两种定义子函数的方法: 1.嵌套定义 myfunc1会和主函数共享变量名.这种情况 ...
- asyncio
一.简介 asyncio是Python 3.4版本引入的标准库,直接内置了对异步IO的支持. asyncio的编程模型就是一个消息循环.我们从asyncio模块中直接获取一个EventLoop的引用, ...
- c#生成动态库并加载
下面这段代码生成dll文件,不能编译运行.点击项目右键,点击生成,这时会在debuge文件中生成相应的配置文件. using System; using System.Collections.Gene ...