使用 Rollup 配置打包及开发环境
介绍一下,开发一个 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>