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文件的高阶使用方式。