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 会自动打开 。现在你可以开始开发和调试，修改代码并且保存，浏览器会自动刷新显示最新的结果。
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+=`
` }) } render() { return ` 
Welcome to Omi
To get started, edit src/component/hello.js and save to reload.
{
{name}} ` }}复制代码 上面是老的方式，webpack2更加建议使用一种"类函数式(function-like)"的 import() 模块加载语法。如:
import("./a.js").then(function(moduleA) { console.log(moduleA); document.body.innerHTML+=`
`});复制代码 这样也能达到同样的效果，当然你也。
兼容 IE8
Omi框架是可以兼容IE8的。
由于使用了webpack-hot-middleware, 开发过程不兼容IE8，但是没关系，npm run dist生成的发布代码是兼容IE8。
需要主要的是，你需要在你的HTML里引用es5-sham或者es5-shim。如:
复制代码
插入 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 ` To get started, edit src/component/hello.js and save to reload.
` }}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 ` Hello Omi! 通过Omi.tag('intro',Intro)把组件Intro生成为可以声明式的标签。注意便签名字要使用小写，多个单词使用中划线，如:my-intro、app-header等。
特别需要注意的是每个组件必须要要闭合成一个节点，比如:
错误写法:
render() { return ` a b ` }复制代码 正确写法:
render() { return ` a b ` }复制代码 导入图片、字体、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/",};复制代码