寫在前面
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)
