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 会自动打开 :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:

.logo }

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

(data, option){ super(data, option) .a = require("./a.js") .) logo

上面是老的方式，webpack2更加建议使用一种"类函数式(function-like)"的 import() 模块加载语法。如:

..);

这样也能达到同样的效果，当然你也。

兼容 IE8

Omi框架是可以兼容IE8的。

由于使用了webpack-hot-middleware, 开发过程不兼容IE8，但是没关系，npm run dist生成的发布代码是兼容IE8。

需要主要的是，你需要在你的HTML里引用es5-sham或者es5-shim。如:

crossorigin

插入 CSS

通过import可以在js依赖相关的css文件，

import './index.css'

index.css会被提取到CSS文件当中，插入到head里面。

插入组件局部 CSS

Hello (data, option){ super(data, option) ('./_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如下所示:

(data, option){ super(data, option) ((... ... }

插入 Less

通过import可以在js依赖相关的css文件，

import './xxx.less'

xxx.less会在转换成CSS，并且被提取到CSS文件当中，插入到head里面。

插入组件局部 Less

(data, option){ super(data, option) ('./_index.less') Intro

Omi框架的style方法返回的字符串会生成为组件的局部CSS，_index.css文件会在运行时动态插入到head里面。

需要特别注意的是: 组件的局部Less必须使用下划线开头，如_xxx.css，_aaa-bbb.css,不然会被识别成全局CSS插入到head里。

导入组件

如上面一节定义了Intro组件，利用复用。那么怎么在其他组件中使用?

.tag('intro',Intro) (data, option){ super(data, option) 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**

打开之后可以看到

修改 CDN 地址 修改 webserver 和 port 修改 route Github

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