Rollup构建TS项目

1. 进入项目目录通过npm init -y生成package.json文件
2. 新建rollup.config.js配置文件(前提全局安装rollup npm install rollup -g)
3. 通过tsc --init 生成 tsconfig.json文件

4. 安装一些打包的依赖
   1. 安装配置环境变量用来区分本地和生产npm install cross-env -D
   2. 安装热更新npm install rollup-plugin-livereload -D
   3. 引入外部依赖npm install rollup-plugin-node-resolve -D
   4. 替换环境变量给浏览器使用npm install rollup-plugin-replace -D
   5. 安装rollup``web服务npm install rollup-plugin-serve -D
   6. 安装代码压缩插件npm install rollup-plugin-terser -D
   7. 安装TypeScript转换器npm install rollup-plugin-typescript2 -D
   8. 安装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"
  }
}

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"添加本地服务

6. 引入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'
    })
  ]
}

7. 引入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() //热更新
  ]
}

8. 配置代码压缩

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(), //代码压缩
  ]
}

9. 开启soucemap

  output: { //出口
    file: path.resolve(__dirname, './lib/index.js'),
    //以script方式引入
    format: 'umd',
    sourcemap:true,
  },

同时tsconfig.json文件中sourceMap:true打开

10. 开启环境变量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"
  },

11. 将环境变量添加到浏览器环境

import replace from 'rollup-plugin-replace'

  //插件
  plugins: [
    replace(
      {
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        //还可以添加其他变量到全局环境
      }
    )
  ]