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)