腾讯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

等。

导入图片、字体、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

https://github.com/AlloyTeam/omi-cli