Rollup + Ts

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/**/*"
  ]
}