rollup
准备
安装rollup、tslib、typescript、@rollup/plugin-typescript、rollup-plugin-serve、rollup-plugin-livereload依赖
yarn add rollup tslib typescript @rollup/plugin-typescript rollup-plugin-serve rollup-plugin-livereload -D
开始
一、package.json 配置命令行
{
"name": "rollup-typescript",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "rollup --config --watch",
"build":"rollup --config"
},
"devDependencies": {
"@rollup/plugin-typescript": "^8.3.2",
"rollup": "^2.75.6",
"tslib": "^2.4.0",
"typescript": "^4.7.3"
}
}
二、rollup.config.js 配置
import RollupPluginTypescript from "@rollup/plugin-typescript";
import RollupPluginServe from "rollup-plugin-serve";
import RollupPluginLivereload from "rollup-plugin-livereload";
export default {
input: "src/index.ts",
output: {
format: "cjs",
name: "rollup-start",
file: "dist/index.js",
exports: "auto",
},
plugins: [
RollupPluginTypescript(),
RollupPluginLivereload(),
RollupPluginServe({
open: true,
port: 8090,
contentBase: "./dist",
}),
],
};
三、创建dist/index.html模版文件，引入index.js打包文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="index.js"></script>
</body>
</html>