Rollup + Ts

Rollup+Ts demo

一、文件配置

| - src
|   | - utils
|   |   | - .ts
|   | - .babelrc
|   | - main.js
|   | - style.css
| - package.json
| - rollup.config.js
| - tsconfig.json

二、插件下载

rollup // rollup 基本的包
typescript // ts 包
@rollup/plugin-babel // 集成 rollup 和 babel
@babel/core // 集成 rollup 和 babel
@babel/preset-env // rollup babel 的主要包
@rollup/plugin-commonjs // 将 Commonjs 转换为 ES6
@rollup/plugin-node-resolve // 查找 node_modules 模块资源
@rollup/plugin-terser // 压缩代码
@rollup/plugin-typescript // rollup 能支持 typescript 的打包
rollup-plugin-livereload // 热更新
rollup-plugin-postcss // 解析 css 文件
rollup-plugin-serve // 运行项目
tslib // typescript 运行库

三、文件内容

.babelrc

{"presets": [["@babel/env",{"modules": false}]]
}

rollup.config.js

import commonjs from "@rollup/plugin-commonjs"
import resolve from "@rollup/plugin-node-resolve"
import babel from "@rollup/plugin-babel"
import typescript from "@rollup/plugin-typescript";
import terser from "@rollup/plugin-terser";
import postcss from "rollup-plugin-postcss";
import serve from "rollup-plugin-serve";
import livereload from "rollup-plugin-livereload";
export default {input: "./src/main.js",output: {file: "./dist/build.js",format: "es",sourcemap: true,},plugins: [typescript(),babel({exclude: "node_modules/**",}),resolve(),commonjs(),terser(),postcss(),livereload(),serve({open: true,contentBase: 'dist',port: "8888",headers: {"Access-Control-Allow-Origin": "*",},}),],external: [],
};

tsconfig.json

{"compilerOptions": {"lib": ["es6", "DOM"],"module": "esnext","allowJs": true,"outDir": "/"},"exclude": ["node_modules/**","public"],"include": ["src/**/*"]
}