omi-cli
使用者指南
- 檔案目錄
- npm 指令碼
- 程式碼分割
- 相容 IE8
- 插入 CSS
- 插入元件區域性 CSS
- 區域性CSS使用圖片
- 插入 Less
- 插入元件區域性 Less
- 匯入元件
- 匯入圖片、字型、SVG 等檔案
- 修改配置
檔案目錄
執行完omi init my-app，你可以看到會生成如下的基礎目錄結構
my-app/
config
project.js
config.js
src/
component
css
img
js
libs
page
index
page-b
favicon.ico- config裡的檔案是webpack打包配置以及cdn、webserver，埠、route配置
- src目錄是我們的專案邏輯程式碼目錄
npm 指令碼
npm start
當你執行 npm start 會自動開啟 http://localhost:9000/。現在你可以開始開發和除錯，修改程式碼並且儲存，瀏覽器會自動重新整理顯示最新的結果。
npm run dist
當你執行 npm run dist 之後，會建立一個dist目錄，所有要釋出的檔案都在裡面:
my-app/
dist/
chunk
component
css
img
js
libs
favicon.ico
index.html
page-b.htmlcomponent會保留其依賴的某些資原始檔，chunk會輸出分割出來的模板，怎麼分割請往下看。
程式碼分割
為了優化效能，使用者不需要一次性載入所有網頁的依賴，可以在需要使用的時候再進行載入，所以這部分可以進行分割成單獨的模組。
如下面的a.js:
import logo from '../../img/omi.png'
module.exports = { src: logo }通過require.ensure進行按需使用，在使用者點選事件觸發之後才會進行載入a.js以及a.js的所有依賴，如下面程式碼所示:
class Hello extends Omi.Component {
constructor(data, option){
super(data, option)
}
handleClick(){
require.ensure(['./a.js'], function() {
var a = require("./a.js")
document.body.innerHTML+=`<img src="${a.src}">`
})
}
render() {
return `
<div class="App">
<div class="App-header">
<img src='${logo}' onclick="handleClick" class="App-logo" alt="logo" />
<h2>Welcome to Omi</h2>
</div>
<p class="App-intro">
To get started, edit <code>src/component/hello.js</code> and save to reload.
</p>
<p class="App-intro">
{{name}}
</p>
</div>
`
}
}上面是老的方式，webpack2更加建議使用一種"類函式式(function-like)"的 import() 模組載入語法。如:
import("./a.js").then(function(moduleA) {
console.log(moduleA);
document.body.innerHTML+=`<img src="${moduleA.src}">`
});這樣也能達到同樣的效果，當然你也可以使用async/await。
相容 IE8
Omi框架是可以相容IE8的。
由於使用了webpack-hot-middleware, 開發過程不相容IE8，但是沒關係，npm run dist生成的釋出程式碼是相容IE8。
需要主要的是，你需要在你的HTML裡引用es5-sham或者es5-shim。如:
<!--[if lt IE 9]>
<script type="text/javascript" crossorigin="anonymous" src="//s.url.cn/qqun/xiaoqu/buluo/p/js/es5-sham-es5-sham.min.77c4325f.js"></script>
<![endif]-->插入 CSS
通過import可以在js依賴相關的css檔案，
import './index.css'index.css會被提取到CSS檔案當中，插入到head裡面。
插入元件區域性 CSS
import './index.css'
class Hello extends Omi.Component {
constructor(data, option){
super(data, option)
}
style(){
return require('./_hello.css')
}
...
...
}Omi框架的style方法返回的字串會生成為元件的區域性CSS，_hello.css檔案會在執行時動態插入到head裡面。
需要特別注意的是: 元件的區域性CSS必須使用下劃線開頭，如_xxx.css，_aaa-bbb.css,不然會被識別成全域性CSS插入到head裡。
區域性CSS使用圖片
當然不是必須require外部的css檔案，也可以直接寫在style方法內，元件的依賴的圖片資源也在元件的目錄內:
my-app/
src/
component
hello
index.js
pen.png
pencil.png
對應的index.js如下所示:
class Hello extends Omi.Component {
constructor(data, option){
super(data, option)
}
style(){
return `
.icon-pen {
background-image: url(${require('./pen.png')});
}
.icon-pencil {
background-image: url(${require('./pencil.png')});
}
`
}
...
...
}插入 Less
通過import可以在js依賴相關的css檔案，
import './xxx.less'xxx.less會在轉換成CSS，並且被提取到CSS檔案當中，插入到head裡面。
插入元件區域性 Less
class Intro extends Omi.Component {
constructor(data, option){
super(data, option)
}
style(){
return require('./_index.less')
}
render() {
return `
<p class="app-intro">
To get started, edit <code>src/component/hello.js</code> and save to reload.
</p>
`
}
}
export default IntroOmi框架的style方法返回的字串會生成為元件的區域性CSS，_index.css檔案會在執行時動態插入到head裡面。
需要特別注意的是: 元件的區域性Less必須使用下劃線開頭，如_xxx.css，_aaa-bbb.css,不然會被識別成全域性CSS插入到head裡。
匯入元件
如上面一節定義了Intro元件，利用複用。那麼怎麼在其他元件中使用?
import Intro from '../intro/index.js'
Omi.tag('intro',Intro)
class XXX extends Omi.Component {
constructor(data, option){
super(data, option)
}
render() {
return `
<div>
<div>Hello Omi!</div>
<intro></intro>
</div>
`
}
}
export default XXX通過Omi.tag('intro',Intro)把元件Intro生成為可以宣告式的標籤。注意便籤名字要使用小寫，多個單詞使用中劃線，如:my-intro、app-header等。
匯入圖片、字型、SVG 等檔案
如上面的例子:
import logo from './logo.svg'logo.svg會被動態轉成base64。我們可以為每種型別都對應webpack裡的一個loader來處理所有的檔案型別。
修改配置
開啟 config.js，其位置如下:
my-app/
config
project.js
**config.js**開啟之後可以看到
module.exports = {
"webserver": "//localhost:9000/",
"cdn": "",
"port": "9000",
"route": "/news/",
};修改 CDN 地址
module.exports = {
"webserver": "//localhost:9000/",
"cdn": "//s.url.cn/",
"port": "9000",
"route": "/news/",
};修改 webserver 和 port
module.exports = {
"webserver": "//localhost:9000/",
"cdn": "//s.url.cn/",
"port": "9001",
"route": "/news/",
};修改 route
module.exports = {
"webserver": "//localhost:9001/",
"cdn": "//s.url.cn/",
"port": "9001",
"route": "/user/",
};