func-package

函数库, 面向复杂业务场景的 js 类库

1.5 Node.js使用模式

前言

本篇主要讲述用rollup.js的API在Node.js代码中执行编译代码。

实现例子

  • 利用rollup.js的API
  • 在Node.js脚本中编译

demo例子

https://github.com/chenshenhai/rollupjs-note/blob/master/demo/chapter-01-05/

npm i
npm run build

实现步骤

步骤1: 目录和准备

.
├── 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

步骤2: rollup配置

  • rollup 编译配置 ./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']
}),
],
}
  • Node.js 调用rollup编译执行 ./build/build.js
const rollup = require('rollup');
const config = require('./rollup.config');
const inputOptions = config;
const outputOptions = config.output;
async function build() {
// create a bundle
const bundle = await rollup.rollup(inputOptions);
console.log(`[INFO] 开始编译 ${inputOptions.input}`);
// generate code and a sourcemap
const { code, map } = await bundle.generate(outputOptions);
console.log(`[SUCCESS] 编译结束 ${outputOptions.file}`);
// or write the bundle to disk
await bundle.write(outputOptions);
}
build();
  • ./package.json配置编译执行脚本
{
"scripts": {
"build": "node ./build/build.js"
},
}

步骤3: 待编译ES6源码

  • 源码路径 ./src/index.js

步骤4: 编译结果

  • 在项目目录下执行 npm run build
  • 编译结果在目录 ./dist/

后记

有了前面几篇的学习,本篇应该是很快就能上手理解和实践编译。第一章的快速上手就到此结束,下一章将详解讲述*.js文件的高阶使用方式。