林林总总
前言
本文主要介绍 
![\color{grey}{[JavaScript Api]}](https://math.jianshu.com/math?formula=%5Ccolor%7Bgrey%7D%7B%5BJavaScript%20Api%5D%7D)
使用，将一步步带领大家搭建一个
打包脚本。本文也将不单独介绍命令行调用，如需要请链接rollup中文文档
rollup中文文档
rollup和webpack使用场景
git项目demo传送门
Rollup 是一个 JavaScript 模块打包器,可以用于library 或应用程序将复杂代码解耦，从小块代码编译成大块代码。【...更多概念性的东西就不多介绍了】 直接进入正文
目录结构
首先创建如下目录结构，src目录放置需要打包的library的源码，scripts放置打包脚本。本文只做案例，所有结构逻辑可按具体业务需求自行搭配。
目录
下载依赖包
npm i rollup -D
官方传送门
rollup-plugin-babel是Rollup和Babel之间来转换ES6 / 7代码，并使用Rollup生成独立包的无缝集成插件。在安装的时候，需要注意根据不同的babel版本安装对应的插件版本，否则很容易报错哟。本文将以babel 6.x的版本进行安装
babel 7.x
npm i -D rollup-plugin-babel@latest
babel 6.x
npm i -D rollup-plugin-babel@3
官方传送门
因为rollup打包library的时候，无法对node_modules的文件进行打包，所以我们需要引入rollup-plugin-node-resolve来使用第三方模块node_modules
npm i -D rollup-plugin-node-resolve
官方传送门
rollup-plugin-uglify只能压缩和转换es5语法，如果是es6+请使用rollup-plugin-uglify-es
npm i -D rollup-plugin-uglify
// 6.x版本
npm i -D babel-core
官方传送门
babel-preset-env 可以根据配置的目标浏览器或者运行环境来自动将ES2015+的代码转换为es5
npm i -D babel-preset-env
官方传送门
babel-plugin-external-helpers 把 helpers 收集到一个共享模块或共享文件。helper 函数是 babel 在 transform 时候常用的工具函数，对编译模块时，会将用到的 helpers 放到模块顶部。如果编译多个文件，就会重复引用，导致每个模块都定义一份。
npm i -D babel-plugin-external-helpers
脚本文件
base.js是一个基础配置文件。为dev.js和build.js输出基础配置。本文将默认format:umd格式，如果设置umd，必须设置name哦。其他类型配置，请参考大选项列表
/**@base rollup config基础配置*/
const babel = require("rollup-plugin-babel")
const resolve = require("rollup-plugin-node-resolve")
module.exports = {
// 打包入口
input: 'src/index.js',
// 插件
plugins: [
resolve(),
babel({
exclude: 'node_modules/**',
plugins: ['external-helpers'],
externalHelpers: true
})
],
// 输出配置
output: {
file: 'dist/Hon.js',
format: 'umd',
name: 'Hon'
}
}
dev主要涉及到rollup.watch的使用，监听src/*(可配置)下源码的变化，实现自动打包更新
/**@dev 构建*/
const rollup = require('rollup')
const config = require('./base')
// 初始化配置文件 可以根据需求扩展config
const watcher = rollup.watch(config);
watcher.on('event', event => {
// 状态码
console.log(event.code)
// logic
});
build主要涉及到rollup.rollup的使用，打包到dist目录
/**@build 构建*/
const rollup = require('rollup')
const {uglify} = require('rollup-plugin-uglify')
const config = require('./base')
const version = process.env.VERSION || require('../package.json').version
// 设置头部注释信息
const banner =
'/*!\n' +
` * Hon v${version}\n` +
` * (c) 2018-${new Date().getFullYear()} li hui\n` +
' * Released under the MIT License.\n' +
' */'
// 设置尾部注释信息
const footer =
`/** ${new Date()} **/`
config.output.banner = banner
config.output.footer = footer
function getSize(code) {
return (code.length / 1024).toFixed(2) + 'kb'
}
async function build(config) {
const bundle = await rollup.rollup(config)
// 通过generate拿到code代码 ，计算代码大小
const {output: [{code}]} = await bundle.generate(config.output)
console.log(config.output.file + ':' + getSize(code))
bundle.write(config.output)
}
build(config).then(() => {
// 打压缩包
config.plugins.push(uglify())
config.output.file = 'dist/Hon.min.js'
build(config).then(() => {
console.log('succeed')
})
})
默认源码文件
/**@index 入口文件*/
function reduce() {
console.log('reduce')
}
const utils = {
add(a, b) {
return a + b
}
}
function Hon(config) {
this.config = config
}
Hon.prototype.say = function () {
console.log(this.config)
}
Hon.prototype.add = function (a, b) {
return utils.add.call(this, a, b)
}
module.exports = Hon
设置
.babelrc 可按业务需求扩展
{
"presets": [
[
"env",
{
"modules": false
}
]
]
}
pageage.json 设置启动命令
使用的是babel-node，如果找不到该命令，请全局安装下npm i -g babel-cli
"scripts": {
"dev": "babel-node scripts/dev.js",
"build": "babel-node scripts/build.js"
}
运行
npm run dev
如下
lwydeMacBook-Air:rollup-demo lwy$ npm run dev
> rollupdemo@1.0.0 dev /Users/lwy/Documents/rollup-demo
> babel-node scripts/dev.js
START
BUNDLE_START
BUNDLE_END
END
dist/Hon.js
(function (factory) {
typeof define === 'function' && define.amd ? define(factory) :
factory();
}(function () { 'use strict';
/**@index 入口文件*/
var utils = {
add: function add(a, b) {
return a + b;
}
};
function Hon(config) {
this.config = config;
}
Hon.prototype.say = function () {
console.log(this.config);
};
Hon.prototype.add = function (a, b) {
return utils.add.call(this, a, b);
};
module.exports = Hon;
}));
现在我们对src/index.js添加个utils.reduce方法
var utils = {
add: function add(a, b) {
return a + b;
},
reduce:function () {
}
};
发现控制台watcher又自动执行了
lwydeMacBook-Air:rollup-demo lwy$ npm run dev
> rollupdemo@1.0.0 dev /Users/lwy/Documents/rollup-demo
> babel-node scripts/dev.js
START
BUNDLE_START
BUNDLE_END
END
START
BUNDLE_START
BUNDLE_END
END
我们再去看看dist/Hon.js，也进行了实时更新
(function (factory) {
typeof define === 'function' && define.amd ? define(factory) :
factory();
}(function () { 'use strict';
/**@index 入口文件*/
var utils = {
add: function add(a, b) {
return a + b;
},
reduce:function () {
}
};
function Hon(config) {
this.config = config;
}
Hon.prototype.say = function () {
console.log(this.config);
};
Hon.prototype.add = function (a, b) {
return utils.add.call(this, a, b);
};
module.exports = Hon;
}));
好的，那我们develop的基础功能就弄好了。
build
现在来看看build的表现吧
npm run build
lwydeMacBook-Air:rollup-demo lwy$ npm run build
> rollupdemo@1.0.0 build /Users/lwy/Documents/rollup-demo
> babel-node scripts/build.js
dist/Hon.js:0.64kb
dist/Hon.min.js:0.28kb
succeed
生成了一个压缩和未压缩的文件
image.png
构建完成了。
网友评论