Skip to content

Latest commit

 

History

History
118 lines (87 loc) · 2.31 KB

rollup-ts-babel.md

File metadata and controls

118 lines (87 loc) · 2.31 KB

rollup-ts-babel

配置 rollup

  1. 安装依赖 yarn add -D rollup rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-json rollup-plugin-alias
  2. 添加 rollup.config.js 文件 /rollup.config.js

配置 typescript

  1. 安装 typescript 依赖 yarn add -D typescript
  2. 添加 tsconfig 配置文件 /tsconfig.json

配置 babel

  1. 安装 babel 依赖 yarn add -D rollup-plugin-babel@latest @babel/core @babel/preset-env @babel/preset-typescript
  2. 添加 .babelrc 配置文件
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ]
}

配置 package.json

  1. 添加 package.json 配置文件 /package.json

配置 统一代码风格

  1. 安装依赖
# 安装 eslint
yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

# 安装 prettier
yarn add -D prettier

# 安装 husky、lint-staged
yanr add -D husky lint-staged
  1. 配置 eslint 规则 /.eslintrc.js /.prettierrc
  2. 配置 husky 和 lint-staged
"scripts": {
  "lint": "eslint 'lib/**/*.{js,ts}'"
},
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*./lib/**/*.{js,ts,json,css,less,md}": [
    "prettier --write",
    "yarn lint"
  ]
}

配置 打包流程

  • rimraf - 文件删除工具，用于每次编译前清空 lib 目录
  • npm-run-all - npm 命令并行执行工具
  • rollup-plugin-uglify - uglify js 压缩工具（rollup 版）
  • lodash.merge - 配置合并工具
  • cross-env - 跨平台设置环境变量
  1. 安装依赖 yarn add -D rimraf npm-run-all rollup-plugin-uglify lodash.merge yarn add cross-env
  2. 修改 package.json
"scripts": {
  "lint": "eslint 'lib/**/*.{js,ts}'",
  "dev": "cross-env FORMAT=esm rollup -w -c",
  "build:esm": "cross-env FORMAT=esm rollup -c",
  "build:umd": "cross-env FORMAT=umd rollup -c",
  "build:min": "cross-env FORMAT=min rollup -c",
  "build": "rimraf lib/* && run-p build:esm build:umd build:min"
},

添加 Shebang: "#!/usr/bin/env node"

  1. 编写 rollup 插件, 使用 renderChunk hooks 添加 shebang，解决 eslint 报错 /lib/plugins/banner.js
  2. 使用
// in rollup.config.js
plugins: [
  banner()
]