HTML5技术

omi-cli新版发布-升级webpack2和支持sass生成组件局部CSS - 【当耐特】

字号+ 作者:H5之家 来源:H5之家 2017-03-16 11:03 我要评论( )

写在前面 omi-cli是Omi的命令行工具。在v0.1.X以及之前版本中,生成出来的项目脚手架 是基于webpack1的。由于: webpack1不支持tree-shaking,webpack2 支持tree-shaking webpack1不支持 sass-loader,webpack2 支持sass-loader tree-shaking 作用是移除没有

写在前面

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,如:

    都要改成:

    问题3

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

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

    sass生成组件局部CSS

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

    ... [[] }] } };

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

    ... ... }

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

    ... [[] }] } };

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

    style Header ... .toString(); } ... Header;

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

    相关

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • Omi应用md2site-0.5.0发布-支持动态markdown拉取解析 - 【当耐特】

      Omi应用md2site-0.5.0发布-支持动态markdown拉取解析 - 【当耐特】

      2017-03-16 11:03

    • Omi应用md2site发布-markdown转网站利器 - 【当耐特】

      Omi应用md2site发布-markdown转网站利器 - 【当耐特】

      2017-03-06 16:01

    • Omi命令行界面omi-cli发布 - 【当耐特】

      Omi命令行界面omi-cli发布 - 【当耐特】

      2017-02-27 17:00

    • SQLServer 中发布与订阅 - 神雕爱大侠

      SQLServer 中发布与订阅 - 神雕爱大侠

      2017-02-22 11:00

    网友点评