零配置打包神器Parcel

文章内容输出来源：拉勾大前端高薪训练营

• 零配置的前端应用打包器

  • 提供了近乎傻瓜式的使用体验

• 使用

  • 初始化package.json文件

    • yarn init

  • 安装parcel

    • yarn add parcel-bundler --dev

  • 新建文件src/index.html

    • 会作为parcel打包的入口文件

      • 与webpack一样，parcel也支持任意文件作为打包入口，但是官方建议使用html文件作为打包入口

- 新建src/main.js

	- import foo from './foo'

foo.bar()

- 新建src/foo.js

	- export default {

bar: ()⥤{
console.log(‘hello parcel~’)
}
}

- 打包

	- yarn parcel src/index.html

		- Ok: 不仅打包出文件，而且启动了一个开发服务器，这个服务器就跟webpack中dev server一样。

• 同样支持对ES Modules模块的打包

• 同样支持模块热替换HMR 功能

  • 修改src/main.js

    • import foo from ‘./foo’

foo.bar()

module.hot &&
// 这里的accept跟webpack提供的accept不一样。
// webpack中accept接受两个参数，用来处理指定模块更新后的逻辑
// 这里parcel所提供的accept只接受一个回调函数，
// 作用就是当我们当前模块更新过当前模块所依赖模块更新时都会自动执行
module.hot.accept(() ⥤ {
console.log(‘HMR’)
})

- 打包

	- yarn parcel src/index.html

• 自动安装依赖

  • 修改src/main.js

    • import $ from ‘jquery’
      import foo from ‘./foo’

foo.bar()

$(document.body).append(‘

Hello Parcel~

’)

module.hot &&
// 这里的accept跟webpack提供的accept不一样。
// webpack中accept接受两个参数，用来处理指定模块更新后的逻辑
// 这里parcel所提供的accept只接受一个回调函数，
// 作用就是当我们当前模块更新过当前模块所依赖模块更新时都会自动执行
module.hot.accept(() ⥤ {
console.log(‘HMR’)
})

- 保存即可

• 同样支持加载其他类型的资源模块，依然零配置

  • src/style.css

    • body {
      background-color: #282c40
      }

  • 修改src/main.js

    • import $ from ‘jquery’
      import foo from ‘./foo’
      import ‘./style.css’

foo.bar()

$(document.body).append(‘

Hello Parcel~

’)

module.hot &&
// 这里的accept跟webpack提供的accept不一样。
// webpack中accept接受两个参数，用来处理指定模块更新后的逻辑
// 这里parcel所提供的accept只接受一个回调函数，
// 作用就是当我们当前模块更新过当前模块所依赖模块更新时都会自动执行
module.hot.accept(() ⥤ {
console.log(‘HMR’)
})

- 保存即可生效

• 同样支持动态导入(Dynamic Import)

  • 修改src/main.js

    • // import $ from ‘jquery’
      import foo from ‘./foo’
      import ‘./style.css’

foo.bar()

import(‘jquery’).then($⥤{
$(document.body).append(‘

Hello Parcel~

’)
})

module.hot &&
// 这里的accept跟webpack提供的accept不一样。
// webpack中accept接受两个参数，用来处理指定模块更新后的逻辑
// 这里parcel所提供的accept只接受一个回调函数，
// 作用就是当我们当前模块更新过当前模块所依赖模块更新时都会自动执行
module.hot.accept(() ⥤ {
console.log(‘HMR’)
})

- 保存即可

• 以生产模式打包

  • yarn parcel build src/index.html

  • 额外补充

    • 对于相同体量的项目打包，parcel的构建速度要比webpack快很多，因为在parcel的内部使用多进程同时去工作，充分发挥了多核CPU的性能
    • webpack也可以使用happy pack插件去实现这一点

• 首个版本发布于2017年，出现原因:当时的webpack使用上过于繁琐，而且webpack官方文档也不是很清晰明了

• 核心特点: 真正做到了完全零配置

• 构建速度更快

• 多数还是选择webpack原因分析

  • webpack有更好的生态
  • webpack越来越好用