Rollup 配置学习1.Rollup常见配置rollup.config.js2.初始化项目3.新建目录和编写文件rol

1.Rollup 常见配置

rollup.config.js

// rollup.config.js
export default {
  // 核心选项
  input,     // 必须
  external,
  plugins,

  // 额外选项
  onwarn,

  // danger zone
  acorn,
  context,
  moduleContext,
  legacy

  output: {  // 必须 (如果要输出多个，可以是一个数组)
    // 核心选项
    file,    // 必须
    format,  // 必须
    name,
    globals,

    // 额外选项
    paths,
    banner,
    footer,
    intro,
    outro,
    sourcemap,
    sourcemapFile,
    interop,

    // 高危选项
    exports,
    amd,
    indent
    strict
  },
};

2.初始化项目

mkdir rollupDemo
cd rollupDemo

npm init

npm i --save-dev rollup @rollup/plugin-buble

# rollup 模块是rollup编译的核心模块
# @rollup/plugin-buble 模块是rollup的ES6编译插件

3.新建目录和编写文件

.
├── config # 编译脚本
│   └── rollup.config.js
├── dist # 编译结果(最后会生成目录)
│   └── index.js
|
│   
├── package.json
└── src # ES6源码
    └── index.js

rollup.config.js

const path = require('path');
const buble = require('@rollup/plugin-buble');

const resolve = function(filePath) {
  return path.join(__dirname, '..', filePath)
}

module.exports = {
  input: resolve('src/index.js'),
  output: {
    file: resolve('dist/index.js'),
    format: 'iife'
  },
  plugins: [
    buble()
  ],
}

在./package.json 配置编译执行脚本

{
  "scripts": {
    "build": "node_modules/.bin/rollup -c ./build/rollup.config.js"
  },
}

/src/index.js

const arr1 = [1,2,3];
const arr2 = [4,5,6];

const result = [...arr1, ...arr2];
console.log(result);

编译

npm run build

最后编译结果在目录 ./dist/ 下, 对于更加复杂的ES6+(包括ES7,ES8)等语法，就需要@rollup/plugin-babel插件结合 babel 原生编译插件去处理；

4.编译 ES6+

# 编译 ES6+
# 安装 rollup.js 编译ES6+的 babel 模块

npm i --save-dev @rollup/plugin-babel @babel/core @babel/preset-env

修改原来配置文件

const path = require('path');
const { babel } = require('@rollup/plugin-babel');

const resolve = function(filePath) {
  return path.join(__dirname, '..', filePath)
}

console.log('babel=', babel);

module.exports = {
  input: resolve('src/index.js'),
  output: {
    file: resolve('dist/index.js'),
    format: 'umd',
  }, 
  plugins: [
    babel({
      presets: ['@babel/preset-env']
    }),
  ],
}

格式(format ):
- amd – 异步模块定义，用于像RequireJS这样的模块加载器
- cjs – CommonJS，适用于 Node 和 Browserify/Webpack
- esm – 将软件包保存为 ES 模块文件，在现代浏览器中可以通过
- iife – 一个自动执行的功能，适合作为
- umd – 通用模块定义，以amd，cjs 和 iife 为一体
- system - SystemJS 加载器格式

5.配置开发模式和生产模式

## 安装 rollup.js 编译本地开发服务插件
npm i --save-dev rollup-plugin-serve

## 安装 rollup.js 编译代码混淆插件
npm i --save-dev rollup-plugin-uglify

新建 example/index.html

<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://cdn.bootcss.com/babel-polyfill/6.26.0/polyfill.js"></script>
  </head>
  <body>
    <p>打开控制台看 console.log 数据 </p>
    <script src="./index.js"></script>
  </body>
</html>

等一下配置后运行：

npm run dev

访问 http://127.0.0.1:3001

打开工作台 console 就会显示可运行结果;

先创建基础配置 rollup.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',
    sourcemap: true,
  }, 
  plugins: [
    babel({
      presets: ['@babel/preset-env']
    }),
  ],
}

开发模式配置基本 ./config/rollup.config.dev.js

const path = require('path');
const serve = require('rollup-plugin-serve');
const config = require('./rollup.config');

const resolveFile = function(filePath) {
  return path.join(__dirname, '..', filePath)
}
const PORT = 3001;

config.output.sourcemap = true;
config.plugins = [
  ...config.plugins,
  ...[
    serve({
      port: PORT,
      // contentBase: [resolveFile('')]
      contentBase: [resolveFile('example'), resolveFile('dist')]
    })
  ]
]

module.exports = config;

生产模式配置基本 ./config/rollup.config.prod.js

const { uglify } = require('rollup-plugin-uglify');
const config = require('./rollup.config');

config.output.sourcemap = false;
config.plugins = [
  ...config.plugins,
  ...[
    uglify()
  ]
]

module.exports = config;

在./package.json 修改配置编译执行脚本

{
  "scripts": {
    "build": "node_modules/.bin/rollup -c ./config/rollup.config.prod.js",
    "dev": "node_modules/.bin/rollup -w -c ./config/rollup.config.dev.js"
  },
}

6.css 引用

## 安装 rollup.js css编译插件模块
npm i --save-dev rollup-plugin-postcss

修改基础配置参考

const postcss = require('rollup-plugin-postcss');

const isProductionEnv = process.env.NODE_ENV === 'production';

plugins: [
  postcss({
    extract: true,
    minimize: isProductionEnv,
  }),
  babel({
    presets: ['@babel/preset-env']
  }),
],

7.less编译

## 安装 less 编译插件
npm i --save-dev less

修改基础配置参考

const less = require('less');


const processLess = function(context, payload) {
  return new Promise(( resolve, reject ) => {
    less.render({
      file: context
    }, function(err, result) {
      if( !err ) {
        resolve(result);
      } else {
        reject(err);
      }
    });

    less.render(context, {})
    .then(function(output) {
      // output.css = string of css
      // output.map = string of sourcemap
      // output.imports = array of string filenames of the imports referenced
      if( output && output.css ) {
        resolve(output.css);
      } else {
        reject({})
      }
    },
    function(err) {
      reject(err)
    });

  })
}

plugins: [
    postcss({
      extract: true,
      minimize: isProductionEnv,
      process: processLess,
    }),
]

仅供学习参考