- 进入项目目录通过
npm init -y
生成package.json
文件 - 新建
rollup.config.js
配置文件(前提全局安装rollup
npm install rollup -g
) - 通过
tsc --init
生成tsconfig.json
文件
- 安装一些打包的依赖
- 安装配置环境变量用来区分本地和生产
npm install cross-env -D
- 安装热更新
npm install rollup-plugin-livereload -D
- 引入外部依赖
npm install rollup-plugin-node-resolve -D
- 替换环境变量给浏览器使用
npm install rollup-plugin-replace -D
- 安装
rollup``web
服务npm install rollup-plugin-serve -D
- 安装代码压缩插件
npm install rollup-plugin-terser -D
- 安装
TypeScript
转换器npm install rollup-plugin-typescript2 -D
- 安装
TypeScript``npm install typescript -D
- 安装配置环境变量用来区分本地和生产
package.json
如下
{
"name": "rollupTs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "cross-env NODE_ENV=development rollup -c -w",
"build":"cross-env NODE_ENV=produaction rollup -c"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"cross-env": "^7.0.3",
"rollup-plugin-livereload": "^2.0.5",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-replace": "^2.2.0",
"rollup-plugin-serve": "^1.1.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.31.1",
"typescript": "^4.5.5"
}
}
- 编写
rollup.config.js
import path from 'path'
import ts from 'rollup-plugin-typescript2'
export default {
input: './src/index.ts', //入口
output: { //出口
file: path.resolve(__dirname, './lib/index.js'),
//以script方式引入
format: 'umd'
},
//插件
plugins: [
//ts插件让rollup读取ts文件
ts()
]
}
- 此处需要修改
tsconfig.json
中"module":"2015"
- 在
package.json
文件中添加"build":"rollup -c"
- 启动打包命令
npm run build
,即可打包输出到lib
文件夹下 - 在
package.json
文件中添加"dev":"rollup -c -w"
添加本地服务
- 引入
serve
插件启动前端服务
import path from 'path'
import ts from 'rollup-plugin-typescript2'
import serve from 'rollup-plugin-serve'
export default {
input: './src/index.ts', //入口
output: { //出口
file: path.resolve(__dirname, './lib/index.js'),
//以script方式引入
format: 'umd'
},
//插件
plugins: [
//ts插件让rollup读取ts文件
ts(),
serve({
open: true,
port: 1988,
openPage: '/public/index.html'
})
]
}
- 引入
livereload
服务来启动热更新
import path from 'path'
import ts from 'rollup-plugin-typescript2'
import serve from 'rollup-plugin-serve'
import livereload from 'rollup-plugin-livereload'
export default {
input: './src/index.ts', //入口
output: { //出口
file: path.resolve(__dirname, './lib/index.js'),
//以script方式引入
format: 'umd'
},
//插件
plugins: [
//ts插件让rollup读取ts文件
ts(),
serve({
open: true,
port: 1988,
openPage: '/public/index.html'
}),
livereload() //热更新
]
}
- 配置代码压缩
import path from 'path'
import ts from 'rollup-plugin-typescript2'
import serve from 'rollup-plugin-serve'
import livereload from 'rollup-plugin-livereload'
import { terser } from 'rollup-plugin-terser'
export default {
input: './src/index.ts', //入口
output: { //出口
file: path.resolve(__dirname, './lib/index.js'),
//以script方式引入
format: 'umd'
},
//插件
plugins: [
//ts插件让rollup读取ts文件
ts(),
serve({
open: true,
port: 1988,
openPage: '/public/index.html'
}),
livereload(), //热更新
terser(), //代码压缩
]
}
- 开启soucemap
output: { //出口
file: path.resolve(__dirname, './lib/index.js'),
//以script方式引入
format: 'umd',
sourcemap:true,
},
同时tsconfig.json
文件中sourceMap:true
打开
- 开启环境变量
package.json
//cross-env NODE_ENV=环境变量
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "cross-env NODE_ENV=development rollup -c -w",
"build":"cross-env NODE_ENV=produaction rollup -c"
},
- 将环境变量添加到浏览器环境
import replace from 'rollup-plugin-replace'
//插件
plugins: [
replace(
{
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
//还可以添加其他变量到全局环境
}
)
]