rollup

安装

npm i -g rollup

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验。

• 命令行
• 配置文件

ts

{
  "name": "rollup-demo",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "build": "rollup -c"
  },
  "dependencies": {},
  "devDependencies": {
    "cross-env": "^7.0.3",
    "rollup": "^2.76.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-replace": "^2.2.0",
    "rollup-plugin-typescript2": "^0.32.1",
    "typescript": "^4.7.4"
  }
}

• rollup.config.js

import * as path from 'path'
import ts from 'rollup-plugin-typescript2'

export default {
  input: './src/index.ts',
  output: {
    file: path.resolve(__dirname, './lib/index.js'),
    format: 'umd'
  },
  plugins: [
    ts()
  ]
};

• tsconfig.js

{
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "./lib",
    // 输出目录
    "sourceMap": false,
    // 是否生成sourceMap
    "target": "ES2015",
  }
}

• build

yarn run build

sourceMap

• tsconfig.js

sourceMap: true

• rollup.config.js

export default {
  input: './src/index.ts',
  output: {
    file: path.resolve(__dirname, './lib/index.js'),
    format: 'umd',
    sourcemap: true
  },
  plugins: [
    ts()
  ]
};

cross-env

环境变量

yarn add -D cross-env

"scripts": {
    "build": "cross-env NODE_ENV=development rollup -c"
  },
  
  # rollup.config.js
 #  console.log(process.env.NODE_ENV)  == development