携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

前言

webpack有各种loader，帮助我们解决各种问题，这针对于开发项目是很有效的，但是他生成代码有很多不是我们所写的逻辑代码

最近频繁收到开发单纯的js库需求，选用的是rollup工具打包。

因为rollup生成代码只是把我们的代码转码成目标js并无其他,同时如果需要,他可以同时帮我们生成支持umd/commonjs/es的js代码,vue/react/angular都在用他作为打包工具。

快速入门

1.新建工程

为了方便开发，rollup会添加到我们的模版工程 wg-template-web 中，并且支持 wg-cli 快速创建应用，所以这里直接 clone wg-template-web

git clone http://xxxx/frontend/wg-template-web.git

git checkout -b rollup

2.安装rollup

执行命令安装

npm i -D rollup

执行后我们发现项目自动生产了一些文件，并看到package包里有了rollup。

添加gitignore，忽略不用上传的文件

/node_modules
package-lock.json

3.创建rollup.config.js

我们也可以不用配置文件直接用cli命令来打包，但是如果添加更多的选项，这种命令行的方式就显得麻烦。为此，我们可以创建配置文件来囊括所需的选项。配置文件由 JavaScript 写成，比 CLI 更加灵活。（cli命令打包请看官网介绍）

export default {
  input: 'src/main.js', // 要打包的的文件源路径（应用程序的主要入口点）
  output: {
    // 文件输出配置
    file: 'dist/bundle.cjs.js', // 打包后生产的文件位置，及文件名
    format: 'cjs', // 文件的输出格式（CommonJs规范， 是Node.js的官方模块化规范）
    name: 'bundleName' // 包的全局变量名称
  }
}

4.编写要打包的文件

1.新建src文件夹，并新建main.js(应用程序入口)

import sayHi from './modules/index';

sayHi(' test test ');

2.新建modules文件夹（代表模块文件）

const sayHi = (val) => {
  console.log(val);
}

export default sayHi;

5.编写package.json中的打包命令

  "scripts": {
    "build": "rollup -c"
  },

6.执行npm run build 查看文件输出结果

npm run build

我们看到输出的结果十分的清晰，没有像webpack那样多余的代码

7.使用打包后的文件

在更目录创建 index.html 并引用 ./dist/bundle.cjs.js

<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8" />
  <head>
    <title>test</title>
  </head>
  <body>
  </body>
  <script src="./dist/bundle.cjs.js"></script>
</html>

打开这个网页后我们看到弹窗内容Hello from Rollup

约束代码风格

安装必须得依赖

 npm i eslint -D
 npm i -D eslint-plugin-vue
 npm i -D eslint-plugin-prettier
 npm i -D prettier
 npm i -D eslint-config-prettier

安装eslint的扩展依赖

 npm i -D eslint-config-airbnb-base
 npm i -D eslint-plugin-html
 npm i -D eslint-plugin-import

如果是 ts 还需要安装下面两个依赖

 npm i -D @typescript-eslint/eslint-plugin
 npm i -D @typescript-eslint/parser

eslint-config-prettier

解决 ESLint 中的样式规范和 prettier 中样式规范的冲突，以 prettier 的样式规范为准，使 ESLint 中的样式规范自动失效

项目根目录新建 .eslintrc.js 文件

配置 eslint 校验规则

module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es6: true,
  },
  extends: ['plugin:vue/essential', 'airbnb-base', 'plugin:prettier/recommended'],
  parserOptions: {
    parser: '@babel/eslint-parser',
    ecmaFeatures: {
      jsx: true,
    },
  },
  // vue 的关键配置
  plugins: ['html', 'vue'],
  globals: {
    wx: true,
    qq: true,
    'qq.maps': true,
    $: true,
    Vue: true,
    getApp: true,
  },
  rules: {
    'arrow-body-style': [0],
    'class-methods-use-this': [0],
    'consistent-return': [0],
    'generator-star-spacing': [0],
    'global-require': [0],
    'import/extensions': [0],
    'import/first': [0],
    'no-param-reassign': [0],
    'no-plusplus': [0],
    'import/no-relative-packages': [0],
    'import/no-extraneous-dependencies': [0],
    'import/prefer-default-export': [0],
    'import/no-unresolved': [0],
    'import/no-absolute-path': [0],
    'import/order': [0],
    'linebreak-style': [0],
    'no-bitwise': [0],
    'no-cond-assign': [0],
    'no-console': [0],
    'no-debugger': [0],
    'no-else-return': [0],
    'no-nested-ternary': [0],
    'no-restricted-syntax': [0],
    'no-trailing-spaces': [0],
    'no-use-before-define': [0],
    'no-useless-escape': [0],
    'no-return-await': [0],
    'no-unused-vars': [0],
    'prefer-template': [0],
    'no-underscore-dangle': [0],
    'require-yield': [1],
    'no-prototype-builtins': [0],
    'no-shadow': ['error', { builtinGlobals: false, hoist: 'functions', allow: ['e', 'state'] }],
    'no-unused-expressions': [
      0,
      {
        allowShortCircuit: true,
        allowTernary: true,
      },
    ],
    'max-len': [0],
    'vue/singleline-html-element-content-newline': [0],
    'vue/multiline-html-element-content-newline': [0],
    'vue/multi-word-component-names': [0],
    'vue/no-mutating-props': [0],
    'vue/require-valid-default-prop': [0],
    'vue/no-unused-vars': 'off',
    camelcase: ['warn', { ignoreDestructuring: true }],
    'prefer-destructuring': ['error', { object: true, array: false }],
  },
};

如果是 ts ：

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es2021: true,
  },
  parser: 'vue-eslint-parser',
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
    // eslint-config-prettier 的缩写
    'prettier',
  ],
  parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  // eslint-plugin-vue @typescript-eslint/eslint-plugin eslint-plugin-prettier的缩写
  plugins: ['vue', '@typescript-eslint', 'prettier'],
  rules: {
    '@typescript-eslint/ban-ts-ignore': 'off',
    '@typescript-eslint/no-unused-vars': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/no-empty-function': 'off',
    '@typescript-eslint/no-use-before-define': 'off',
    '@typescript-eslint/ban-ts-comment': 'off',
    '@typescript-eslint/ban-types': 'off',
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    'no-var': 'error',
    'prettier/prettier': 'error',
    // 禁止出现console
    'no-console': 'warn',
    // 禁用debugger
    'no-debugger': 'warn',
    // 禁止出现重复的 case 标签
    'no-duplicate-case': 'warn',
    // 禁止出现空语句块
    'no-empty': 'warn',
    // 禁止不必要的括号
    'no-extra-parens': 'off',
    // 禁止对 function 声明重新赋值
    'no-func-assign': 'warn',
    // 禁止在 return、throw、continue 和 break 语句之后出现不可达代码
    'no-unreachable': 'warn',
    // 强制所有控制语句使用一致的括号风格
    curly: 'warn',
    // 要求 switch 语句中有 default 分支
    'default-case': 'warn',
    // 强制尽可能地使用点号
    'dot-notation': 'warn',
    // 要求使用 === 和 !==
    eqeqeq: 'warn',
    // 禁止 if 语句中 return 语句之后有 else 块
    'no-else-return': 'warn',
    // 禁止出现空函数
    'no-empty-function': 'warn',
    // 禁用不必要的嵌套块
    'no-lone-blocks': 'warn',
    // 禁止使用多个空格
    'no-multi-spaces': 'warn',
    // 禁止多次声明同一变量
    'no-redeclare': 'warn',
    // 禁止在 return 语句中使用赋值语句
    'no-return-assign': 'warn',
    // 禁用不必要的 return await
    'no-return-await': 'warn',
    // 禁止自我赋值
    'no-self-assign': 'warn',
    // 禁止自身比较
    'no-self-compare': 'warn',
    // 禁止不必要的 catch 子句
    'no-useless-catch': 'warn',
    // 禁止多余的 return 语句
    'no-useless-return': 'warn',
    // 禁止变量声明与外层作用域的变量同名
    'no-shadow': 'off',
    // 允许delete变量
    'no-delete-var': 'off',
    // 强制数组方括号中使用一致的空格
    'array-bracket-spacing': 'warn',
    // 强制在代码块中使用一致的大括号风格
    'brace-style': 'warn',
    // 强制使用骆驼拼写法命名约定
    camelcase: 'warn',
    // 强制使用一致的缩进
    indent: 'off',
    // 强制在 JSX 属性中一致地使用双引号或单引号
    // 'jsx-quotes': 'warn',
    // 强制可嵌套的块的最大深度4
    'max-depth': 'warn',
    // 强制最大行数 300
    // "max-lines": ["warn", { "max": 1200 }],
    // 强制函数最大代码行数 50
    // 'max-lines-per-function': ['warn', { max: 70 }],
    // 强制函数块最多允许的的语句数量20
    'max-statements': ['warn', 100],
    // 强制回调函数最大嵌套深度
    'max-nested-callbacks': ['warn', 3],
    // 强制函数定义中最多允许的参数数量
    'max-params': ['warn', 3],
    // 强制每一行中所允许的最大语句数量
    'max-statements-per-line': ['warn', { max: 1 }],
    // 要求方法链中每个调用都有一个换行符
    'newline-per-chained-call': ['warn', { ignoreChainWithDepth: 3 }],
    // 禁止 if 作为唯一的语句出现在 else 语句中
    'no-lonely-if': 'warn',
    // 禁止空格和 tab 的混合缩进
    'no-mixed-spaces-and-tabs': 'warn',
    // 禁止出现多行空行
    'no-multiple-empty-lines': 'warn',
    // 禁止出现;
    // semi: ['warn', 'never'],
    // 强制在块之前使用一致的空格
    'space-before-blocks': 'warn',
    // 强制在 function的左括号之前使用一致的空格
    // 'space-before-function-paren': ['warn', 'never'],
    // 强制在圆括号内使用一致的空格
    'space-in-parens': 'warn',
    // 要求操作符周围有空格
    'space-infix-ops': 'warn',
    // 强制在一元操作符前后使用一致的空格
    'space-unary-ops': 'warn',
    // 强制在注释中 // 或 /* 使用一致的空格
    // "spaced-comment": "warn",
    // 强制在 switch 的冒号左右有空格
    'switch-colon-spacing': 'warn',
    // 强制箭头函数的箭头前后使用一致的空格
    'arrow-spacing': 'warn',
    'prefer-const': 'warn',
    'prefer-rest-params': 'warn',
    'no-useless-escape': 'warn',
    'no-irregular-whitespace': 'warn',
    'no-prototype-builtins': 'warn',
    'no-fallthrough': 'warn',
    'no-extra-boolean-cast': 'warn',
    'no-case-declarations': 'warn',
    'no-async-promise-executor': 'warn',
  },
  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly',
  },
};

项目根目录新建 .eslintignore 文件

通过该文件配置不需要经过 eslint 校验的目录和文件

# add files you wish to ignore here
*.sh
node_modules/
dist/
*.md
*.scss
*.woff
*.ttf
yarn.lock
package.json
LICENSE
CNAME
.gitignore
.prettierignore
.gitkeep

项目根目录新建 .prettier.js 文件

配置 prettier 校验规则

module.exports = {
  printWidth: 120,
  singleQuote: true,
  semi: true,
  trailingComma: 'all',
  proseWrap: 'never',
  endOfLine: 'auto',
};

项目根目录新建 .prettierignore 文件

通过该文件配置不需要经过 prettierignore 校验的目录和文件

# add files you wish to ignore here
*.sh
node_modules/
dist/
*.md
*.scss
*.woff
*.ttf
yarn.lock
package.json
LICENSE
CNAME
.gitignore
.prettierignore
.gitkeep

package.json 新增配置

    "lint": "eslint --quiet --ext .ts,.tsx,.vue,.js,.jsx src",
    "lintfix": "eslint --quiet --fix --ext .ts,.tsx,.vue,.js,.jsx src",
    "prettier": "prettier --write",

上面配置完成后,可以运行以下命令测试下代码检查格式化效果:

npm run lint
npm run lintfix
npm run prettier

报错：Parsing error: Cannot find module '@babel/eslint-parser'

该报错是因为没有安装babel的问题

npm i -D @babel/eslint-parser

1.使用Babel

为了正确解析我们的模块并使其与旧版浏览器兼容，我们应该包括babel来编译输出。许多开发人员在他们的项目中使用 Babel ，以便他们可以使用未被浏览器和 Node.js 支持的将来版本的 JavaScript 特性。

1.1 安装 rollup-plugin-babel

npm i -D rollup-plugin-babel

1.2 配置rollup.config.js

import babel from 'rollup-plugin-babel';

  plugins: [
    // 使用插件
    babel({
      exclude: 'node_modules/**' // 排除node_modules文件夹下，只编译我们自己的源代码
    })
  ]

1.3 添加Babel配置文件.babelrc

在src文件夹下添加.babelrc

{
  "presets": [
    [
      "@babel/env",
      {
        "module": false , // 设置 "modules": false ，否则 Babel 会在 Rollup 有机会做处理之前，将我们的模块转成 CommonJS ，导致 Rollup 的一些处理失败。
      }
    ]
  ]
}

这个设置有一些不寻常的地方。

首先，我们设置 "modules": false ，否则 Babel 会在 Rollup 有机会做处理之前，将我们的模块转成 CommonJS ，导致 Rollup 的一些处理失败。

第二，我们将 .babelrc 文件放在 src 中，而不是根目录下。这允许我们对于不同的任务有不同的 .babelrc 配置，比如像测试，如果我们以后需要的话 - 通常为单独的任务单独配置会更好。

1.4 安装@babel/core 和 @babel/preset-env

@babel/core是babel的核心，我们看到babelrc配置了 preset env，所以要安装这两个插件

npm i -D @babel/core @babel/preset-env

执行 npm run lint 查看结果

最后运行npm run build

不出意外的话，我们看到打包后出来的文件内容经过babel转换后有es6语法变成了es5语法

如果要让vue支持 jsx 的语法

npm i -D @vue/cli-plugin-babel

开始在 .babelrc 折腾了好久，发现均无效，最后发现需要在 rollup.config.js 中配置 babel 预设。

  plugins: [
    // 使用插件
    babel({
      exclude: 'node_modules/**', // 排除node_modules文件夹下，只编译我们自己的源代码
      // 开始在 .babelrc 折腾了好久，发现均无效，最后发现需要在 rollup.config.js 中配置 babel 预设。
      presets: ['@vue/cli-plugin-babel/preset'],
    })
  ]

如果遇到报错

[!] (plugin babel) Error: Runtime helpers are not enabled. Either exclude the transform-runtime Babel plugin or pass the runtimeHelpers: true option. See github.com/rollup/roll… for more information

  plugins: [
    // 使用插件
    babel({
      runtimeHelpers: true,
      exclude: 'node_modules/**', // 排除node_modules文件夹下，只编译我们自己的源代码
      // 开始在 .babelrc 折腾了好久，发现均无效，最后发现需要在 rollup.config.js 中配置 babel 预设。
      presets: ['@vue/cli-plugin-babel/preset'],
    })
  ]

rollup环境脚手架配置（一）

前言