騰訊AlloyTeam正式發佈omi-cli腳手架 - 建立網站無需任何配置

omi-cli

• omi-cli
• omi-cli命令
• omi框架

用戶指南

• 文件目錄
• npm 腳本
  • npm start
  • npm run dist
• 代碼分割
• 兼容 IE8
• 插入 CSS
• 插入組件局部 CSS
• 局部CSS使用圖片
• 插入 Less
• 插入組件局部 Less
• 導入組件
• 導入圖片、字體、SVG 等文件
• 修改配置
  • 修改 CDN 地址
  • 修改 webserver 和 port
  • 修改 route

文件目錄

執行完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.html複製代碼

component會保留其依賴的某些資源文件，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 Intro複製代碼

Omi框架的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等。

特別須要注意的是每一個組件必需要要閉合成一個節點，好比:

錯誤寫法:

render() {
    return ` <div>a</div> <div>b</div> `
  }複製代碼

正確寫法:

render() {
    return ` <div> <div>a</div> <div>b</div> <div>`
  }複製代碼

導入圖片、字體、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/",
};複製代碼

Github

github.com/AlloyTeam/o…