写在前面

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. 在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 ...

  2. 正则表达式之一:TSQL注释的查找

    最近自己做了个小项目,涉及到了大量的正则表达式匹配和处理,在这里也和大家分享一下. 我相信接触过SQL Server数据库的很多朋友都知道,它是以"--"开头来进行注释的,但你觉得 ...

  3. OpenLayers.Map的一些特殊事件

    开年上班的第二天,无意中看到一些没见过的事件,特地来给广大人民群众报个信. 众所周知的,map里面的 eventListeners 支持的事件挺多的,比如: var map = new OpenLay ...

  4. js阻止表单提交的两种方法

    下面直接看代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. secureCRT端口转发功能

    总共有三台机器: A是办公网络的windows主机, B是一台linux堡垒机(114.144.xxx.xx), C是内网生产环境一台linux机器(192.168.1.6), A只能访问B但A不能访 ...

  6. Linux驱动技术(一) _内存申请

    先上基础,下图是Linux的内存映射模型,其中体现了Linux内存映射的几个特点: 每一个进程都有自己的进程空间,进程空间的0-3G是用户空间,3G-4G是内核空间 每个进程的用户空间不在同一个物理内 ...

  7. ASP.NET Core中的缓存[1]:如何在一个ASP.NET Core应用中使用缓存

    .NET Core针对缓存提供了很好的支持 ,我们不仅可以选择将数据缓存在应用进程自身的内存中,还可以采用分布式的形式将缓存数据存储在一个“中心数据库”中.对于分布式缓存,.NET Core提供了针对 ...

  8. uml系列(三)——用例图

    用例图是从用户的角度出发,描述系统功能的.在软件开发过程中,开发人员首先获知用户的需求,然后设计用例模型,在分析并设计系统来实现这些用例.在系统完成后,还要根据用例图来对系统进行验证. 用例图主要介绍 ...

  9. Sql 知识点小结

    使用数据库的好处: 1.安全 2.支持多用户操作 3.误删数据比较容易恢复 4.存储较大容量的数据MySql: MYsql AB公司开发的数据库, 现在归属Oracle公司,开元的关系型数据库RDBM ...

  10. List<bean>转换Jsonarray知识心得

    使用基本的jdbc连接mysql,获取数据. 创建实体类user: package com.json; public class user { private int id; private Stri ...