寫在前面

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                  //開發(fā)$ npm run dist                 //部署發(fā)布

采坑之路

在升級的過程中遇到了不少問題，這里記錄一下。

問題1

photoshop培訓,電腦培訓,電腦維修培訓,移動軟件開發(fā)培訓,網站設計培訓,網站建設培訓

webpack2中，CommonsChunkPlugin不再支持上面的傳參形式，必須傳JSON形式。

問題2

photoshop培訓,電腦培訓,電腦維修培訓,移動軟件開發(fā)培訓,網站設計培訓,網站建設培訓

webpack2中，不在允許省略-loader的形式標記loader，如：

 {test: /\.html$/, loader: "string"},

都要改成：

 {test: /\.html$/, loader: "string-loader"},

問題3

photoshop培訓,電腦培訓,電腦維修培訓,移動軟件開發(fā)培訓,網站設計培訓,網站建設培訓

使用webpack-stream的同學可能會碰到上面這個錯誤。找了好久發(fā)現：

photoshop培訓,電腦培訓,電腦維修培訓,移動軟件開發(fā)培訓,網站設計培訓,網站建設培訓

在gulp里要修改下第二個參數，把 null 改成 require('webpack')。

sass生成組件局部CSS

在傳統(tǒng)的webpack項目腳手架中，都會包含css相關的三個loader：

// webpack.config.jsmodule.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內部的管線里面，會把執(zhí)行style方法，把返回的css轉成局部css，然后插入到頁面的head里面。所以和webpack三個loader里的管線有沖突！怎么解決？去掉一個loader便可！

// webpack.config.jsmodule.exports = {
    ...    module: {
        rules: [{
            test: /\.scss$/,
            use: [{
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "sass-loader" // compiles Sass to CSS
            }]        }]    }};

我們只需要能夠在js里動態(tài)獲取到編譯好的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不是字符串對象，需要執(zhí)行toString才能獲取到css字符串。

http://www.cnblogs.com/iamzhanglei/p/6557699.html