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年免费升级与技术支持, ...
随机推荐
- 在windows下运行spark
1.下载spark:spark-2.0.0-bin-hadoop2.7.tgz 2.解压至D:\bigdata\spark-2.0.0-bin-hadoop2.7 3.配置环境变量 HADOOP_HO ...
- 正则表达式之一:TSQL注释的查找
最近自己做了个小项目,涉及到了大量的正则表达式匹配和处理,在这里也和大家分享一下. 我相信接触过SQL Server数据库的很多朋友都知道,它是以"--"开头来进行注释的,但你觉得 ...
- OpenLayers.Map的一些特殊事件
开年上班的第二天,无意中看到一些没见过的事件,特地来给广大人民群众报个信. 众所周知的,map里面的 eventListeners 支持的事件挺多的,比如: var map = new OpenLay ...
- js阻止表单提交的两种方法
下面直接看代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- secureCRT端口转发功能
总共有三台机器: A是办公网络的windows主机, B是一台linux堡垒机(114.144.xxx.xx), C是内网生产环境一台linux机器(192.168.1.6), A只能访问B但A不能访 ...
- Linux驱动技术(一) _内存申请
先上基础,下图是Linux的内存映射模型,其中体现了Linux内存映射的几个特点: 每一个进程都有自己的进程空间,进程空间的0-3G是用户空间,3G-4G是内核空间 每个进程的用户空间不在同一个物理内 ...
- ASP.NET Core中的缓存[1]:如何在一个ASP.NET Core应用中使用缓存
.NET Core针对缓存提供了很好的支持 ,我们不仅可以选择将数据缓存在应用进程自身的内存中,还可以采用分布式的形式将缓存数据存储在一个“中心数据库”中.对于分布式缓存,.NET Core提供了针对 ...
- uml系列(三)——用例图
用例图是从用户的角度出发,描述系统功能的.在软件开发过程中,开发人员首先获知用户的需求,然后设计用例模型,在分析并设计系统来实现这些用例.在系统完成后,还要根据用例图来对系统进行验证. 用例图主要介绍 ...
- Sql 知识点小结
使用数据库的好处: 1.安全 2.支持多用户操作 3.误删数据比较容易恢复 4.存储较大容量的数据MySql: MYsql AB公司开发的数据库, 现在归属Oracle公司,开元的关系型数据库RDBM ...
- List<bean>转换Jsonarray知识心得
使用基本的jdbc连接mysql,获取数据. 创建实体类user: package com.json; public class user { private int id; private Stri ...