介绍一下，开发一个 Lib，使用 rollup 的配置流程

文章所有代码地址： https://github.com/JuZiSang/coding-test/tree/master/Web/Rollup

安装所需依赖

# 安装 rollup
yarn add rollup -D

# 安装 babel 所需依赖
yarn add @babel/core @babel/plugin-syntax-dynamic-import @babel/plugin-transform-runtime @babel/preset-env @babel/runtime @rollup/plugin-babel -D
yarn add core-js

# 安装 typescript 所需依赖
yarn add rollup-plugin-typescript2 typescript -D

# 安装样式相关依赖
yarn add rollup-plugin-postcss sass -D

# 安装编译 nodejs 模块所需依赖
yarn add @rollup/plugin-node-resolve @rollup/plugin-commonjs -D

打包配置

项目结构

├── src
│   ├── lib
│   │   └── index.ts
│   └── main.ts
├── .browserslistrc
├── babel.config.js
├── package.json
├── rollup.config.js
├── tsconfig.json
└── yarn.lock

rollup.config.js

import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import typescript from 'rollup-plugin-typescript2'
import babel from '@rollup/plugin-babel'
import postcss from 'rollup-plugin-postcss'
import autoprefixer from 'autoprefixer'

export default {
  input: 'src/lib/index.ts',
  output: [
    { file: 'dist/lib.umd.js', name: 'Lib', format: 'umd' },
    { file: 'dist/lib.global.js', name: 'Lib', format: 'iife' },
    { file: 'dist/lib.esm.js', format: 'esm' }
  ],
  plugins: [
    // 可以 import node_modules 中的模块
    resolve(),
    // 将 commonjs 规范的模块，转换为 es6
    commonjs(),
    // typescript 转换，只有最基础的转换，将 ts > es6
    typescript(),
    // babel 编译 ts 转换出的 es6 模块
    babel({
      exclude: 'node_modules/**',
      babelHelpers: 'bundled',
      extensions: ['.js', '.ts']
    }),
    // 转换 scss
    postcss({
      extract: 'outline.css',
      extensions: ['scss', 'css'],
      minimize: true,
      plugins: [autoprefixer()]
    })
  ]
}

babel.config.js

module.exports = {
  presets: [
    ['@babel/preset-env', {
      'useBuiltIns': 'usage',
      'corejs': 3
    }]
  ],
  plugins: [
    '@babel/plugin-syntax-dynamic-import'
  ],
} 

tsconfig.json

配置基本只用来引导 vscode 提示，不做其他转换

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": false,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "sourceMap": false,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

• .browserslistrc

  给 postcss 看的

> 1%
last 2 versions
not dead

开发环境

配置一个改动 js 及 style 能自动重载的环境

# nollup 在 rollup 上实现 重载 or 热重载
# cross-env 用来设置环境变量
yarn add nollup cross-env -D

项目结构

├── src
│   ├── lib
│   │   └── index.ts
│   └── main.ts
├── examples # 新增
│   └── index.html
├── .browserslistrc
├── .nolluprc.js # 新增
├── babel.config.js
├── package.json
├── rollup.config.js
├── tsconfig.json
└── yarn.lock

.nolluprc.js

module.exports = {
  port: 8080,
  hot: true,
  contentBase: 'examples'
}

package.json

  "scripts": {
    "start": "cross-env NODE_ENV=development nollup --config rollup.config.js",
    "build": "cross-env NODE_ENV=production rollup --config rollup.config.js"
  }

rollup.config.js

import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import typescript from 'rollup-plugin-typescript2'
import babel from '@rollup/plugin-babel'
import postcss from 'rollup-plugin-postcss'
import autoprefixer from 'autoprefixer'
// 区分开发环境
const isDev = process.env.NODE_ENV === 'development'

export default {
  // 开发环境使用不同的入口
  input: isDev ? 'src/main.ts' : 'src/lib/index.ts',
  output: isDev
    ? [{ file: 'examples/main.js', sourcemap: true, format: 'iife' }]
    : [
      { file: 'dist/lib.umd.js', name: 'Lib', format: 'umd' },
      { file: 'dist/lib.global.js', name: 'Lib', format: 'iife' },
      { file: 'dist/lib.esm.js', format: 'esm' }
    ],
  plugins: [
    resolve(),
    commonjs(),
    typescript(),
    babel({
      exclude: 'node_modules/**',
      babelHelpers: 'bundled',
      extensions: ['.js', '.ts']
    }),
    postcss({
      extract: 'outline.css',
      extensions: ['scss', 'css'],
      minimize: true,
      plugins: [autoprefixer()]
    })
  ]
}

examples/index.html

注意引入 css 及 js，名字就是配置中的 output 中的名字

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Examples</title>
  <link rel="stylesheet" type="text/css" href="./outline.css">
</head>

<body>
  <div id="app"></div>
  <script src="./main.js"></script>
</body>

</html>