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

當耐特發表於2017-06-08
網站

omi-cli

使用者指南

檔案目錄

執行完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…

相關文章