导航
目标
构建一个由typescript编写的库，并打包出es模块、CommonJS、AMD三种模块。
安装
npm i rollup -D
新建文件
src/index.js
import {a, b} from './test'
export default b
src/test
export const a = () => {
console.log('a')
}
export const b = () => {
console.log('b')
}
export const c = () => {
console.log('c')
}
新建配置文件
rollup.config.js
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'cjs'
}
};
package.json
{
// ...
"scripts": {
"build": "rollup -c"
},
// ...
}
运行命令
npm run build
dist/bundle.js
'use strict';
const b = () => {
console.log('b');
};
module.exports = b;
可以看到：
- 引用了a但是未使用a，未打包a
- 未引用b，未打包
打包多种规范
rollup.config.js
export default {
input: 'src/index.js',
output: [{
file: 'dist/bundle.umd.js',
format: 'umd',
name: 'axiosTs'
},{
file: 'dist/bundle.esm.js',
format: 'esm',
name: 'axiosTs'
}]
};
代码还是比较多的，本着重复代码写一遍的原则，做一些改造
const formats = ['umd', 'esm']
const output = formats.map((format) => ({
file: `dist/bundle.${format}.js`,
format,
name: 'axiosTs',
}))
export default {
input: 'src/index.js',
output
};
支持ts
src中的文件改成xxx.ts，安装ts插件和typescript
npm i rollup-plugin-typescript2 typescript -D
rollup.config.js
import ts from 'rollup-plugin-typescript2'
const formats = ['umd', 'esm']
const output = formats.map((format) => ({
file: `dist/bundle.${format}.js`,
format,
name: 'axiosTs',
}))
export default {
input: 'src/index.ts', // 注意此处的后缀，src中的文件已改成xxx.ts
output,
plugins: [
ts()
],
}
解决一些问题
引用外部模块
安装插件
npm i rollup-plugin-node-resolve -D
rollup.config.js
import ts from 'rollup-plugin-typescript2'
import resolve from 'rollup-plugin-node-resolve';
const formats = ['umd', 'esm']
const output = formats.map((format) => ({
file: `dist/bundle.${format}.js`,
format,
name: 'axiosTs',
}))
export default {
input: 'src/index.ts',
output,
plugins: [
resolve(), // 注意顺序
ts()
],
}
引用并导出CommonJS的包
安装插件
npm i rollup-plugin-commonjs -D
rollup.config.js
import ts from 'rollup-plugin-typescript2'
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
const formats = ['umd', 'esm']
const output = formats.map((format) => ({
file: `dist/bundle.${format}.js`,
format,
name: 'axiosTs',
}))
export default {
input: 'src/index.ts',
output,
plugins: [
resolve(),
commonjs(),
ts(),
serve('dist')
],
}
压缩代码
npm i rollup-plugin-terser -S
rollup.config.js
import ts from 'rollup-plugin-typescript2'
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import { terser } from "rollup-plugin-terser";
const formats = ['umd', 'esm']
const output = formats.map((format) => ({
file: `dist/axios-ts.${format}.min.js`,
format,
name: 'axiosTs',
}))
export default {
input: 'src/index.ts',
output,
plugins: [
resolve(),
commonjs(),
ts(),
terser()
],
}
package.json
{
"main": "dist/axios-ts.umd.min.js",
"module": "dist/axios-ts.esm.min.js",
}
结束
搭建环境的过程还是比较简单的，可以看一些别人的实现。代码分支a-2，说一下有关文章的代码分支是以a开头，a-2就是文章的第二篇，也就是标题后面的序号，分支的序号是不连续的。我的理解可能是错的，希望大家能够指出，我会及时修改文章避免把其他同学带跑偏。如果有什么问题，欢迎评论区讨论，共同学习，共同进步。奥利给！
