腾讯AlloyTeam正式发布omi-cli脚手架 - 建立网站无需任何配置

时间 2019-11-24

标签腾讯 alloyteam 正式发布 omi cli 脚手架建立网站无需任何配置栏目腾讯繁體版

原文原文链接

omi-cli

用户指南

文件目录

执行完omi init my-app，你能够看到会生成以下的基础目录结构javascript

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/。如今你能够开始开发和调试，修改代码而且保存，浏览器会自动刷新显示最新的结果。css

npm run dist

当你执行 npm run dist 以后，会建立一个dist目录，全部要发布的文件都在里面:html

my-app/
  dist/
    chunk
    component
    css
    img
    js
    libs
    favicon.ico
    index.html
    page-b.html复制代码

component会保留其依赖的某些资源文件，chunk会输出分割出来的模板，怎么分割请往下看。java

代码分割

为了优化性能，用户不须要一次性加载全部网页的依赖，能够在须要使用的时候再进行加载，因此这部分能够进行分割成单独的模块。
以下面的a.js:webpack

import logo from '../../img/omi.png'

module.exports = { src: logo }复制代码

经过require.ensure进行按需使用，在用户点击事件触发以后才会进行加载a.js以及a.js的全部依赖，以下面代码所示:git

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() 模块加载语法。如:github

import("./a.js").then(function(moduleA) {
  console.log(moduleA);
  document.body.innerHTML+=`<img src="${moduleA.src}">`
});复制代码

这样也能达到一样的效果，固然你也能够使用async/await。web

兼容 IE8

Omi框架是能够兼容IE8的。npm

因为使用了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…