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