使用rollup打包ts文件

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第19天，点击查看活动详情

安装依赖

• 全局安装rollup npm install rollup -g
• 安装 typescript npm install typescript -D
• 安装ts转换器 npm isntall rollup-plugin-typescript2 -D
• 安装代码压缩 插件 npm install rollup-plugin-terser -D
• 安装rollupweb服务 npm install rollup-plugin-serve -D
• 安装热更新 npm install rollup-plugin-livereload -D
• 安装配置环境变量区分生产和本地。npm install cross-env -D

步骤

1. npm init -y 安装依赖
2. 创建src public rollup.config.js文件
3. 配置rollup.config.js 配置package.json里的脚本

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"rollup -c",
    "dev":"rollup -c -w"
  },

• 首先配置入口 input :"./src/index.ts"
• 配置出口： output ,output是一个对象，file:指定文件产物的路径，format指定产物的格式，sourcemap:表示是否提供sourcemap,这里注意必须是小写的
• plugins 是所有插件的配置的地方，第一个插件就是ts2, ts和rollup关联起来全靠它，第二个是热更新，修改后，自动刷新，第三个是代码压缩插件，代码打包后就一行了，第四个是本地调试用，启动一个本地服务类似live-server,打开指定文件在浏览器，现在还要自己手动引入产物文件

import path from 'path'
import ts2 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.join(__dirname, '/dist/index.js'),
        format: 'umd'
    },
    plugins: [
        ts2(),
        // 热更新
        livereload(),
        // 这个加完，产物就是压缩成1行了
        terser(),
        serve({
            open: true,
            port: 8080,
            openPage: "/public/index.html"
        })
    ]

}

配置环境变量，可以在配置里尝试打印process.env,可以看到脚本里并没有打印env相关的东西，脚本配置里增加一点 corss-env NODE_ENV=producation,然后在结果里就可以看到NODE_ENV=true

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"cross-env NODE_ENV=production rollup -c",
    "dev":"cross-env NODE_ENV=dev rollup -c -w"
  },