https://github.com/imweb/fis3-packager-smart
fis3 智能打包
https://github.com/imweb/fis3-packager-smart
Last synced: about 1 year ago
JSON representation
fis3 智能打包
- Host: GitHub
- URL: https://github.com/imweb/fis3-packager-smart
- Owner: imweb
- Created: 2015-09-28T16:08:47.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2018-04-03T06:48:03.000Z (about 8 years ago)
- Last Synced: 2025-04-15T19:02:05.649Z (about 1 year ago)
- Language: JavaScript
- Size: 68.4 KB
- Stars: 4
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# fis3-packager-smart
fis3 require打包插件。
### 安装
```
npm i -g fis3-packager-smart
```
### 打包原理
分析页面a.html的同步（requires）和异步依赖（asyncs），每个依赖的js文件，会再去分析自身的依赖关系，然后打成一个包。
例如页面a.html中有以下脚本：
```
require.async(['zepto', 'common', 'a'], function($, tools, main){
main.init();
});
```
最终会分析zepto的依赖，打成一个包，common和a类似。
配置中有lib项配置，表示该库会单独打成一个包。
### html中的引用
基于上面的原理，html中引入主JS脚本时，推荐的方式是：
+ 主JS也是一个模块，而不是自执行的脚本，对外导出init接口
+ html中使用内联的方式require主JS脚本，然后调用init方法
```
// main.js
module.exports = {init: function(){}};
// index.html
require(['main'], function(main) {
main.init();
});
```
或者主JS自执行，但是在html中通过require引入
```
// main.js
init();
// index.html
require('main');
// index.html中不要使用下面的方式引入脚本
```
### 配置
```
fis.match('::package', {
packager: fis.plugin('smart', {
// 脚本占位符
scriptPlaceHolder: '',
// 样式占位符
stylePlaceHolder: '',
// 资源占位符
resourcePlaceHolder: '',
output: 'pkg/${id}_min.js',
// 不打包的模块
ignore: [],
// 适合移动端场景
cssInline: false,
// css是否打包成一个文件，适合单页面应用
cssAllInOne: false,
// 页面js是否打包成一个文件，参考loader
jsAllInOne: false,
// common css，业务自行处理打包，其他打成一个page包
commonCssGlob: /\/?common\//
})
});
```
上面的配置都是默认的，使用者可以完全不用管。
```
fis.match('::package', {
packager: fis.plugin('smart', {
});
});
```