本篇主要讲述用rollup.js的API在Node.js代码中执行编译代码。
demo例子
https://github.com/chenshenhai/rollupjs-note/blob/master/demo/chapter-01-05/
npm inpm run build
.├── build # 编译脚本目录│ ├── build.js # 执行编译的Node.js脚本│ └── rollup.config.js # rollup.js 编译配置├── dist # 编译结果目录│ └── index.js├── example│ └── index.html├── package.json└── src # 源码目录├── index.js└── lib└── demo.js
安装对应编译的npm模块
## 安装 rollup.js 基础模块npm i --save-dev rollup## 安装 rollup.js 编译ES6+的 babel 模块npm i --save-dev @rollup/plugin-babel @babel/core @babel/preset-env
./build/rolluo.config.js
const path = require('path');const { babel } = require('@rollup/plugin-babel');const resolveFile = function(filePath) {return path.join(__dirname, '..', filePath)}module.exports = {input: resolveFile('src/index.js'),output: {file: resolveFile('dist/index.js'),format: 'umd',},plugins: [babel({"presets": ['@babel/preset-env']}),],}
./build/build.js
const rollup = require('rollup');const config = require('./rollup.config');const inputOptions = config;const outputOptions = config.output;async function build() {// create a bundleconst bundle = await rollup.rollup(inputOptions);console.log(`[INFO] 开始编译 ${inputOptions.input}`);// generate code and a sourcemapconst { code, map } = await bundle.generate(outputOptions);console.log(`[SUCCESS] 编译结束 ${outputOptions.file}`);// or write the bundle to diskawait bundle.write(outputOptions);}build();
./package.json
配置编译执行脚本{"scripts": {"build": "node ./build/build.js"},}
./src/index.js
npm run build
./dist/
下有了前面几篇的学习,本篇应该是很快就能上手理解和实践编译。第一章的快速上手就到此结束,下一章将详解讲述*.js
文件的高阶使用方式。