前言
业务线长期的积攒产生了许许多多重复性的工具办法，业务功能模块等， 咱们正好能够用 rollup 构建一个 npm 私服工具包，便于前期业务应用，缩小重复性的代码编写。
我的项目配置
babel
引入依赖
首先运行以下命令装置babel相干：
yarn add @babel/core @babel/cli @babel/preset-env -D配置babel.config.js
module.exports = { presets: [ [ "@babel/preset-env", { targets: "> 0.25%, not dead" } ] ]};搭配@babel/plugin-transform-runtime和core-js：
yarn add core-js @babel/runtimeyarn add @babel/plugin-transform-runtime -D批改babel.config.js如下：
module.exports = { presets: [ [ "@babel/preset-env", { targets: "> 0.25%, not dead", useBuiltIns: "usage", corejs: "3.6.5" } ] ], plugins: ["@babel/plugin-transform-runtime"]};减少 npm scripts
"scripts:" { "babel": "babel ./src/index.js -o ./dist/index.js"}Typescript
面向未来，所以这里引入typescript，对立用 ts 进行开发
yarn add typescript@4.3.5 -Dyarn add @babel/preset-typescript -D批改babel配置如下：
module.exports = { presets: [ [ '@babel/preset-env', { targets: '> 0.25%, not dead', useBuiltIns: 'usage', corejs: '3.6.5' }, '@babel/preset-typescript' ] ], plugins: ['@babel/plugin-transform-runtime']};rollup
我的项目是纯正的Javascript我的项目，没有vue、react相干的业务性代码，所以应用 rollup 进行打包。
引入依赖
yarn add rollup @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve rollup-plugin-terser rollup-plugin-typescript2 tslib -D配置rollup.config.js
import babel from '@rollup/plugin-babel'; // 引入babelimport commonjs from '@rollup/plugin-commonjs'; // 引入cjs插件import { nodeResolve } from '@rollup/plugin-node-resolve'; // 引入resolveimport typescript from 'rollup-plugin-typescript2'; // tsimport { terser } from 'rollup-plugin-terser'; // 压缩打包文件const extensions = ['.js', '.ts'];const pkg = require('./package.json'); // 从package.json引入const version = pkg.version; // 我的项目版本const license = pkg.license; // 协定const author = pkg.author; // 作者// 打包文件的头部申明const banner = '/*!\n' + ` * ${pkg.name} v${version}\n` + ` * (c) 2020-${new Date().getFullYear()} ${author}\n` + ` * Released under the ${license} License.\n` + ' */';module.exports = { input: 'src/index.ts', output: [ // 文件输入配置 { file: 'dist/index.umd.js', // 打包后生产的文件地位，及文件名 format: 'umd', name: 'utools', // 包的全局变量名称 banner }, { file: 'dist/index.esm.js', // 打包后生产的文件地位，及文件名 format: 'esm', name: 'utools', // 包的全局变量名称 banner } ], plugins: [ nodeResolve({ extensions, modulesOnly: true }), commonjs(), typescript(), babel({ babelHelpers: 'runtime', include: 'src/**', exclude: 'node_modules/**', extensions }), terser() ]};减少 npm scripts
"scripts:" { "build": "rollup -c"}Jest
引入依赖
正好引入单元测试，便于我的项目后续迭代保护
yarn add jest@27.0.2 jest-globals ts-jest@27.0.2 @types/jest babel-jest@27.0.2 -D配置jest.config.js
module.exports = { preset: 'ts-jest', testEnvironment: 'node', transform: { '^.+\\.jsx?$': 'babel-jest', // 这个是jest的默认配置 '^.+\\.ts?$': 'ts-jest' // typescript转换 }};减少 npm scripts
"scripts:" { "test": "jest"}Eslint+commitlint
这里应用的部门外部规范化校验工具，间接进行整体的规范化校验，所以不再过多赘述，举荐参考 eslint-config-alloy https://github.com/AlloyTeam/eslint-config-alloy其余配置
rimraf
这里引入了 rimraf，再每次打包前，将原有的 dist 目录下文件删除
批改 npm scripts
"build": "rimraf dist/* && rollup -c"release-it
这里引入了release-it，便于咱们疾速的进行 npm 公布装置依赖
yarn add release-it -D新增.release-it.json文件
{ "git": { "commitMessage": "chore: release v${version}" }, "npm": { "publish": false }, "publishConfig": { "registry": "私服地址" }}新增 npm scripts
"scripts:" { "release": "release-it",}package.json 如下
{ "name": "module name", "version": "module version", "description": "module desc", "main": "dist/index.umd.js", "types": "types/index.d.ts", "module": "dist/index.esm.js", "scripts": { "test": "jest", "babel": "babel ./src/index.js -o ./dist/index.js", "build": "rimraf dist/* && rollup -c", "release": "release-it", "release:beta": "release-it major --preRelease=beta", "fix:src": "npx eslint src --fix --ext .ts", "fix:test": "npx eslint test --fix --ext .js", "lint": "npm run fix:src && npm run fix:test" }, "repository": { "type": "git" }, "author": "module author", "license": "MIT", "devDependencies": {}, "dependencies": {}}