上周，我对自己写的一个 uni-app 类库项目，进行了一些改造。引入了 Rollup 打包流程以及 eslint + prettier 代码规范的工具链。下面就来记录一下环境搭建的流程为日后的环境搭建做参考。

写在前面

先对 Rollup 做一个简单的介绍吧。Rollup是一款 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码。从作用来看，Rollup与Webpack很相似，但Rollup更为小巧，仅仅是一款 Javascript 打包器；比如Rollup中不不支持类似的HMR这种高级特性

Rollup是为了提供一个充分利用ESM各项特性的高效（结构比较扁平，性能比较出众的类库）打包器，同时 Rollup 支持各种 plugin 来提升它的拓展性。我们每天都在用的Vue、React 这样的前端框架也是用 Rollup 来打包的。

相较于 Webpack 的大而全，适合打包构建一些完整的前端项目。Rollup 则更加适合打包一些纯 js 的类库项目。

安装依赖

rollup # 打包工具
rollup-plugin-node-resolve # 依赖引入插件
rollup-plugin-commonjs # commonjs 转换 plugin
rollup-plugin-eslint # eslint 校验 plugin
rollup-plugin-babel
@rollup/plugin-json
babel-eslint
babel-preset-env
babel-preset-stage-0
eslint
eslint-config-prettier
eslint-plugin-prettier
prettier
prettier-eslint

注：npm install 以上依赖是记得加上 --save-dev 参数

Rollup 配置

在根目录新建 rollup.config.js

/**
 * @flie rollup.config.js
 * @description Rollup 配置文件
 */
import path from "path";
import resolve from "rollup-plugin-node-resolve";
import commonJs from "rollup-plugin-commonjs";
import json from '@rollup/plugin-json'
import { eslint } from "rollup-plugin-eslint";
import pkg from "./package.json";

const getPath = (_path) => path.resolve(__dirname, _path);

const extensions = ["js"];

// eslint 插件配置
const eslintPlugin = eslint({
  throwOnError: true,// 抛出错误
  include: ["src/**/*.js"], // lint 范围(包括那些文件)
  exclude: ["node_modules/**", "dist/**"], // 不进行 lint 检查的文件
});

// 基础配置
const commonConf = {
  input: getPath("./src/index.js"), // 入口文件
  plugins: [resolve(extensions), commonJs(), json(), eslintPlugin], // 插件
};

// 出口 map
const outputMap = [
  {
    file: pkg.umd,
    format: "umd",
  },
  {
    file: pkg.esm,
    format: "esm",
  },
];

// 打包配置
const buildConf = (options) => Object.assign({}, commonConf, options);

export default outputMap.map((output) =>
  buildConf({ output: { name: pkg.name, ...output } })
);

eslint 配置

在配置完 Rollup 之后,让我们来配置一下书写规范相关的工具链。
首先在根目录创建 eslintrc.cjs 文件

// eslintrc.cjs
module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  parser:"babel-eslint",
  extends: ["eslint:recommended", "prettier"],
  plugins: ["prettier"],
  globals:{
    process:'writable',
    uni:'writable', // uni-app api
    my:'readonly' // 支付宝小程序 api
  },
  rules: {
    "strict": 0,
    "no-unused-vars": ["error", { args: "none" }],
    "max-lines": [
      "error",
      { max: 600, skipBlankLines: true, skipComments: true }, // 限制最大行数
    ],
  },
};

prettier 配置

在配置完了 eslint 后，我们当然还要配置 prettier 这个格式化工具来使得我们的代码规划化跟家如虎添翼。
还是相似的步骤，在根目录创建 prettierrc.cjs 文件

// prettierrc
module.exports = {
  // 一行最多 100 字符
  printWidth: 100,
  // 不使用缩进符，而使用空格
  useTabs: false,
  // 使用 2 个空格缩进
  tabWidth: 2,
  tabSize: 2,
  // 行尾需要有分号
  semi: true,
  // 使用单引号
  singleQuote: true,
  // 对象的 key 仅在必要时用引号
  quoteProps: 'as-needed',
  // jsx 不使用单引号，而使用双引号
  jsxSingleQuote: false,
  // 末尾不需要逗号 'es5'  none
  trailingComma: 'es5',
  // 大括号内的首尾需要空格
  bracketSpacing: true,
  // jsx 标签的反尖括号需要换行
  jsxBracketSameLine: false,
  // 箭头函数，只有一个参数的时候，也需要括号
  arrowParens: 'avoid',
  // 每个文件格式化的范围是文件的全部内容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要写文件开头的 @prettier
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  // 使用默认的折行标准
  proseWrap: 'preserve',
  // 根据显示样式决定 html 要不要折行
  htmlWhitespaceSensitivity: 'css',
  // 换行符使用 lf 结尾是 \n \r \n\r auto
  endOfLine: 'lf',
};

package.json

最后我们在 package.json 文件中添加打包的 npm script,以及 babel 的简单配置

{
  ...
  "main":"dist/index.esm.js",
  "umd":"dist/index.umd.js",
  "esm":"dist/index.esm.js",
  "type":"module",
  "scripts":{
    "build":"rm -rf dist && eslint -c .eslintrc.cjs && rollup -c rollup.config.js"
  },
  "babel":{
    "presets":{
      "env",
      "stage-0"
    }
  }
  ...
}

在配置好以上的所有之后，一个简单好用类库开发环境就可以开始使用了。