零配置前端构建工具parcel 初探

前端圈内新工具层出不穷，不断提升各位FEer的开发效率和体验。

前端工程构建方案从

grunt

->

glup

->

webpack

不断地在改进。

webpack

有很多优点，如：

code splitting

，

HRM

，

css module

，

source map

都是经常使用的，但功能强大，自由度高，导致代码的工程配置很多，往往超过500行以上，并且并不一定是最优的配置，所以

parcel

应运而生。

特点：

零配置（配置量确实很少，webpack4 会对一些功能进行零配置）。

不同于传统打包工具的打包策略，把js文件中引入的一些非js资源，都会单独放到一个依赖包中，在output的时候会把，对于其他资源，诸如 图片资源 会直接在导出在 js 中一个绝对路径， 并且会自动帮你生成source map。

css中的 @import 的文件，会全部打包在一个CSS文件中。

插件

Babel

因为我们经常使用ES6、ES7语法，那我们就需要对js进行转码。babel就是我们使用的，所以我们只需配置一个

.babelrc

文件，然后选择配置你使用的转码插件。

cnpm i babel-preset-env

{
"presets": ["env"]
}

Postcss

cnpm i postcss-modules autoprefixer -D

创建`.postcssrc`文件

{
"modules": true,
"plugins": {
"autoprefixer": {
"grid": true
}
}
}

HRM

parcel的模块热替换仅仅是针对js和css资源的。

生产环境

parcel build index.js