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)