0.1.3 • Published 4 years ago
vue-dict v0.1.3
Rollup.js 下一代的 ES6 模块打包机
在我们模块化项目时,经常调用一个模块,使用了其中一个方法,其它 N 多的方法我们未调用,我们希望未调用到的方法或者变量忽略它们,并且不打包到 js 文件中,这样在大项目里面可以显著减少文件的体积,特别在移动终端,虽然 4G 非常快,但是我还是希望更省流量。
ES6 帮我们实现了,目前 webpack
和 browserify
都还不支持这一屌爆了的功能。如果你现在就想实现这一功能的话,你就可以尝试使用rollup.js
使用方法
使用gulp
工具来搞定打包功能。首先在根目录建立gulpfile.js
和 package.json
文件这个是 gulp
工具的标配。如果不知道怎么玩儿gulp
,得先去研究研究
先安装依赖模块
npm install gulp --save
npm install rollup --save
npm install rollup-plugin-commonjs --save
npm install rollup-plugin-node-resolve --save
gulpfile.js
var gulp = require("gulp");
var fs = require("fs");
var rollup = require("rollup").rollup;
var commonjs = require("rollup-plugin-commonjs");
var nodeResolve = require("rollup-plugin-node-resolve");
gulp.task("script", function () {
return rollup({
entry: "src/main.js",
plugins: [nodeResolve({ jsnext: true }), commonjs()],
}).then(function (bundle) {
// 输出 bundle + sourcemap
var result = bundle.generate({
// output format - 'amd', 'cjs', 'es6', 'iife', 'umd'
// amd – 使用像requirejs一样的银木块定义
// cjs – CommonJS,适用于node和browserify / Webpack
// es6 (default) – 保持ES6的格式
// iife – 使用于<script> 标签引用的方式
// umd – 适用于CommonJs和AMD风格通用模式
/**
* output format - 'amd', 'cjs', 'es6', 'iife', 'umd'
* amd – 使用像requirejs一样的银木块定义
* cjs – CommonJS,适用于node和browserify / Webpack
* es6 (default) – 保持ES6的格式
* iife – 使用于<script> 标签引用的方式
* umd – 适用于CommonJs和AMD风格通用模式
*/
format: "cjs",
});
fs.writeFileSync("bundle.js", result.code);
bundle.write({
format: "cjs",
dest: "dist/main.js",
});
});
});
再去建立 main.js
和 main.js
,运行 npm script
进行打包,就可得到你想要的 js 文件了。
rollup 插件
Plugins: https://github.com/rollup/rollup/wiki/Plugins
- babel – transpile code with Babel
- browserify-transform – use Browserify transforms as plugins
- coffee-script – convert CoffeeScript to JS
- commonjs – convert CommonJS modules to ES6
- eslint - verify entry and imported scripts
- includepaths – provide base paths to resolve imports from
- inject – detect dependencies and inject them
- istanbul – Instruments code for code coverage with Istanbul
- json – convert JSON to ES6
- memory - load entry from memory
- multi-entry – allows multiple 'entry points' instead of just one
- node-resolve – use the Node.js module resolution algorithm (e.g. modules from
node_modules
, installed with npm) - pegjs - import PEG.js grammars as parsers
- postcss - compile postcss and insert to head
- ractive – precompile Ractive components
- replace – replace occurrences of a set of strings
- riot - compile Riot.js tag file
- string – import text files as strings
- stylus-css-modules – compile Stylus and inject CSS modules
- uglify - minify generated bundle
- vue - compile vue components
参考资料
官网:http://rollupjs.org
Github:https://github.com/rollup/rollup