Rollup快速入门
本篇带领大家快速熟悉使用rollupjs打包个人库，前提是大家已配置好node开发环境。如没配置node开发环境，请登录nodejs官网，自行安装。
- 创建目录，初始化项目。如在d:盘下创建person-lib目录。
md person-lib;
// 再进入person-lib目录
npm init, 按要求填写相关信息，最终会成生一个package.json文件。
- 安装rollup, 用npm或yarn安装，注意安装到开发依赖。
npm i rollup -D 或 yarn add rollup -D
- 在当前目录下创建src目录，这个目录下我们创建三个文件，main.js入口文件，incrementer.js，foo.js两个要导出的文件。
// main.js
import foo from './foo.js';
import { count, increment } from './incrementer.js';
console.log(count); // 0
increment();
console.log(count); // 1
console.log(foo);
export default {
count,
increment: function() {
this.count ++
},
};
// incrementer.js
export let count = 0;
var obj = {
name: "dss",
age: 18
};
console.log(obj);
export function increment() {
count += 1;
}
// foo.js
export default 'hello world!';
- 在根目录下创建rollup.config.js文件，rollup打包的配置文件，也是重点，可根据自已的需求来打包什么格的文件，这里我将常用格式全部打包，配置文件如下：
const name = 'test-library-shu';
export default {
input : 'src/main.js',
output: [
{
file: `dist/${name}.esm.js`,
format: 'es',
sourcemap: true,
},
{
file: `dist/${name}.cjs.js`,
format: 'cjs',
},
{
file: `dist/${name}.umd.js`,
format: 'umd',
name: 'app',
},
{
file: `dist/${name}.global.js`,
format: 'iife'
}
],
plugins: [
]
}
- 打包，可以在命令行输入rollup -c，也可在package.json中scripts中配置，如下：
// 命令行
rollup -c
// package.json
"scripts": {
"build": "rollup -c"
}
// 再在命令行输入
npm build 或 yarn build
- package.json相关配置说明，具相关配置说明可见npm官网，这里我们将常用与讲官网没讲而已成为标准的字段。
- "main"打包后引用该库时的入口文件。
"main": "dist/test-library-shu.cjs.js",
- "module"打包后引用该库时将es模块引入，并进行Three-shaking，webpack打包时先从module中去找，如没module字段再从main中找，这个字段非官方，但webpack作为标准字段。
"module": "dist/test-library-shu.esm.js",
- "browser"，browser环境下的入口文件，"browser","module", "main"三字段优先级为: "browser","module", "main"。
"browser": "dist/test-library-shu.umd.js",
{
"name": "test-library-shu",
"version": "1.0.1",
"description": "rollup example, test npm library",
"main": "dist/test-library-shu.cjs.js",
"author": "shuxianghui",
"license": "MIT",
"module": "dist/test-library-shu.esm.js",
"browser": "dist/test-library-shu.umd.js",
"unpkg": "dist/test-library-shu.umd.js",
"jsdeliver": "dist/test-library-shu.umd.js",
"scripts": {
"build": "rollup -c"
},
"devDependencies": {
"rollup": "^2.71.1",
}
}
- 一些常用的rollup插件，这些插件都是可选的，从实际需要来安装。
- rollup-plugin-json: 能够读取josn文件。
npm i rollup-plugin-josn -D 或 yarn add rollup-plugin-josn -D // 安装 // rollup.config.js配置 import josn from 'rollup-plugin-josn'; plugins: [ json() ]- rollup-plugin-babel: es6语法转换, 我们还需要安装babel-preset-latest，babel-plugin-external-helpers。
yarn add rollup-plugin-babel -D // 安装 // rollup.config.js配置 import babel from 'rollup-plugin-babel; plugins: [ babel({ exclude: 'node_modules/**' }) ] // 创建.babelrc { "presets": [ ["latest", { "es2015": { "modules": false // 我们设置 "modules": false ，否则 Babel 会在 Rollup 有机会做处理之前，将我们的模块转成 CommonJS ，导致 Rollup 的一些处理失败。 } }] ], "plugins": ["external-helpers"] }- rollup-plugin-node-resolve: 告诉rollup如何查找外部模块。
yarn add rollup-plugin-node-resolve -D // 安装 // rollup.config.js配置 import resolve from 'rollup-plugin-node-resolve'; plugins: [ resolve() ]- rollup-plugin-commonjs: 将commonjs转换成ES2015模块。
yarn add rollup-plugin-commonjs -D // 安装 // rollup.config.js配置 import commonjs from 'rollup-plugin-commonjs'; plugins: [ commonjs({ include: 'node_modules/**', // Default: undefined exclude: [ 'node_modules/foo/**', 'node_modules/bar/**' ], // Default: undefined // 上面二选一 // if false then skip sourceMap generation for CommonJS modules sourceMap: false, // Default: true }) ]- eslint: 语法规范。
yarn add eslint -D // 创建.eslintrc.js文件 module.exports = { env: { browser: true, es2015: true, node: true, }, extends: [ 'eslint:recommended', ], parserOptions: { ecmaVersion: 6, sourceType: "module", }, rules: { }, }; - 打包发布: 打包yarn build, 如要发布到npm，需要有npm帐号，再在本地登录，或在package.json配置好npm账号，运行npm publish即可。
