backtolife
0%

前端构建工具

发表于 更新于 阅读次数： Disqus：

parcel 适合快速原型开发 和 中小型项目
webpack 适合中大型项目
rollupjs 适合开发给开发人员使用的库

参考

资源

webpack

parcel

rollupjs

安装

1
npm i -D rollup

rollup.config.js

插件

rollup-plugin-babel

安装 babel 和 [core-js][]

1
npm i -D @babel/core @babel/preset-env @babel/cli core-js@3

安装 rollup-plugin-babel

1
npm install --save-dev rollup-plugin-babel@latest

rollup.config.js

1
2
3
4
5
6
7
8
9
import babel from 'rollup-plugin-babel'

export default {
   plugins: [
    babel({
      exclude: 'node_modules/**'
    })
  ]
}

安装 cross-env

1
npm i -D cross-env

安装 [jest][] [babel-jest][]

1
npm i -D jest babel-jest

.babelrc

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
{
  "env": {
    "test": {
      "presets": [
        [
          "@babel/preset-env",
           {
            "targets": {
              "node": "current"
            },
            "modules": "auto",
            "useBuiltIns": "usage",
            "corejs": { "version": 3, "proposals": true }
          }
        ]
      ]
    },
    "production": {
      "presets": [
        [
          "@babel/preset-env",
          {
            "modules": false,
            "useBuiltIns": "usage",
            "corejs": { "version": 3, "proposals": true }
          }
        ]
      ]
    }
  }
}

jest.config.js

1
2
3
4
5
6
7
8
// For a detailed explanation regarding each configuration property, visit:
// https://jestjs.io/docs/en/configuration.html

module.exports = {
  collectCoverage: true,
  testEnvironment: 'node',
  testMatch: ['<rootDir>/__tests__/**/*spec.js']
}

package.json

1
2
3
4
5
6
7
{
"scripts": {
    "build": "rollup -c",
    "build:prod": "cross-env BABEL_ENV=production npm run build",
    "test": "cross-env BABEL_ENV=test jest",
  }
}

安装 [core-js][]

1
npm i -D core-js@3

rollup.config.js

1
2
3
export default {
   external: ['core-js']
}

rollup-plugin-babel-minify

安装

1
npm i -D rollup-plugin-babel-minify

rollup.config.js

1
2
3
4
5
import minify from 'rollup-plugin-babel-minify'

export default {
   plugins: [minify()]
}

rollup-plugin-commonjs rollup-plugin-node-resolve

这两个插件配合, 将 node_modules 中的 commonjs 模块转为 es6 模块, 方便 rollup 做摇树优化
安装

1
npm i -D rollup-plugin-node-resolve rollup-plugin-commonjs

rollup.config.js

1
2
3
4
5
6
7
8
9
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'

export default {
   plugins: [
     resolve(),
     commonjs()
    ]
}

rollup-plugin-filesize

安装

1
npm i -D rollup-plugin-filesize

rollup.config.js

1
2
3
4
5
import filesize from 'rollup-plugin-filesize'

export default {
   plugins: [filesize()]
}

rollup-plugin-terser

安装

1
npm i -D rollup-plugin-terser

rollup.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import filesize from 'rollup-plugin-terser'

export default {
   plugins: [
      terser({
          output: {
            // 保留版权注释
            comments (node, comment) {
              const text = comment.value
              const type = comment.type
              if (type === 'comment2' // multiline comment) {
                return /preserve|license|cc_on/i.test(text)
              }
            }
          }
      })
   ]
}