@levinzhang
2018-01-04T16:58:31.000000Z
字数 1730
阅读 551
Parcel是一个新的Web应用打包器,它宣称在简便性和速度上带来了一定改善,本文介绍了Parcel的基本安装过程以及与React、Vue的集成用法。
本文最初发布于Medium上freeCodeCamp的博客站点,经原作者授权由InfoQ中文站翻译并分享。
什么?又有一个打包器(bundler)/构建工具?是的——果真如此,演化和创新相结合为我们带来了Parcel。
webpack要有大量的配置,这样带来的成本就是复杂性——Parcel带来了简洁性。Parcel将自己标榜为“零配置”。
Parcel内置了一个开发服务器,这个开发服务器能够在我们修改文件之时自动重新构建应用,为了加快开发,它还支持模块热替换(https://parceljs.org/hmr.html)。
需要考虑的事情:Webpack依然非常棒,有时候它会更快一些。
Parcel的错误处理
这完全取决于你,但是我个人会在以下场景中使用不同的打包器:
接下来,我们快速看一下Parcel。
Parcel的安装非常简单直接。
npm install parcel-bundler --save-dev
我们在本地安装了parcel-bundler npm包,现在我们要初始化一个node项目。
接下来,我们创建index.html
和index.js
文件:
现在,我们将index.html
和index.js
文件连接起来:
最后,添加parcel脚本到package.json
中:
这就是要配置的所有内容——超乎想象地节省时间!
接下来,我们启动服务器!
请注意构建时间:
只要15ms,确实是非常快的!
那HMR的效果怎样呢?
同样感觉是非常快的。
我们只需node-sass
包。
在就绪之后,我们添加一些样式并在index.js
中导入styles.scss
:
我们需要添加一个build
脚本到package.json
中:
运行我们的构建脚本:
Parcel确实给我们带来了很多的便利。
还可以通过下面的方式指定特定的构建路径:
parcel build index.js -d build/output
搭建React环境非常简单,需要做的就是安装依赖并搭建.babelrc
:
npm install --save react react-dom babel-preset-env babel-preset-react && touch .babelrc
一切准备就绪,接下来见识一下它的威力,在继续下面的内容之前,请尝试编写我们的初始react组件。
接下来,是一个使用Vue的样例。
首先,安装vue
和parcel-plugin-vue
,其中后者是用来支持.vue
组件的。
$ npm i --save vue parcel-plugin-vue
我们需要添加根元素,导入vue index文件并初始化vue。
首先,创建一个vue目录,然后创建index.js
和app.vue
文件
$ mkdir vue && cd vue && touch index.js app.vue
现在,我们修改index.js
和index.html
文件:
最后,初始化vue并编写第一个vue组件。
就这样,我们安装了Vue,并且还能支持.vue
。
这一项非常容易,只需安装TypeScript就可以了。
npm i --save typescript
创建名为index.ts
文件并插入到index.html
中。
以上样例的源码都可以通过获取。