rollup配置及使用前端rollup

前言业务线长期的积累产生了许许多多重复性的工具方法，业务功能模块等，我们正好可以用 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/runtime yarn 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 -D yarn 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'; // 引入babel import commonjs from '@rollup/plugin-commonjs'; // 引入cjs插件 import { nodeResolve } from '@rollup/plugin-node-resolve'; // 引入resolve import typescript from 'rollup-plugin-typescript2'; // ts import { 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
引入依赖 【rollup配置及使用】正好引入单元测试，便于项目后续迭代维护

yarn add jest@27.0.2jest-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": {} }