Parcel 打包示例(React HelloWorld)

前端之家收集整理的这篇文章主要介绍了Parcel 打包示例(React HelloWorld)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Parcel 打包特点

极速打包时间

Parcel 使用 worker 进程去启用多核编译。同时有文件系统缓存,即使在重启构建后也能快速再编译。

将你所有的资源打包

Parcel 具备开箱即用的对 JS,CSS,HTML,文件 及更多的支持,而且不需要插件

自动转换

如若有需要,Babel,PostCSS,和PostHTML甚至 node_modules 包会被用于自动转换代码.

配置代码分拆

使用动态 import() 语法,Parcel 将你的输出文件束(bundles)分拆,因此你只需要在初次加载时加载你所需要的代码

热模块替换

Parcel 无需配置,在开发环境的时候会自动在浏览器内随着你的代码更改而去更新模块。

友好的错误日志

当遇到错误时,Parcel 会输出 语法高亮的代码片段,帮助你定位问题。

使用 Parcel 打包的 React HelloWorld 应用。GitHub 地址: https://github.com/justjavac/parcel-example/tree/master/react-helloworld

0. 新建目录

1. 初始化 npm

此时会创建要给 package.json 文件文件内容

2. 添加 React

yarn:

npm:

package.json 文件内容

3. 添加 Babel

新建 .babelrc 文件

输入内容

添加 babel-preset-react:

yarn:

npm:

此时 package.json 文件内容

5. 添加 Parcel

yarn:

npm:

此时 package.json 文件内容

6. 新建 index.html 文件

内容

猜你在找的JavaScript相关文章