We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? # to your account
网上关于parcel的报道很多，其实也是个和webpack类似的资源打包编译工具，官网上对其主要的宣传点还是在打包更快速，零配置，入口支持html,css,js... 当然，听到这里，或许每个人都想去尝鲜。因为我现在项目主要的技术栈是vue，所以我们来基于Vue来试试parcel 到底怎么样。
运行以下命令，安装parcel:
npm install -g parcel-bundler
按照官方的说法，0配置，理论上我什么都不安装即可以完成项目的构建，于是乎我兴高采烈的创建了一个main.js用来作为我ES6的测试文件：
// main.js const a = 'hello parcel' console.log(a)
再建立一个index.html作为其入口文件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>parcel</title> </head> <body> </body> <script src="./main.js"></script> </html>
当我们愉快的运行parcel index.html的时候报错了：
parcel index.html
很显然，说transform-runtime 模块在.babelrc 文件中找不到....oh fuck，行吧，我就依你！
transform-runtime
.babelrc
# 安装依赖 npm i babel-plugin-transform-runtime --save-dev
建立.babelrc文件
{ "plugins": [ "transform-runtime" ] }
再次运行命令，终于编译成功了，产生了两个目录，一个是 .cache 一个是dist目录。.cache存放的是编译缓存文件，可以提高parcel再次打包编译的速度。dist便是我们最终生成的资源文件。
.cache
dist
首先是准备我们的Vue包 npm install vue --save 然后改写我们的main.js
npm install vue --save
import Vue from 'vue/dist/vue.min.js' new Vue({ el: '#app', data: { msg: 'Hello Parcel' } })
至于这里为什么要引入vue.min.js有兴趣的可以参考我的这篇文章 vue 目录介绍 然后是我们的html
vue.min.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>parcel</title> </head> <body> <div id="app">{{msg}}</div> </body> <script src="./main.js"></script> </html>
访问localhost:12345 一切正常。
localhost:12345
由于这里我们没有任何配置，没办法像webpack那样记载vue-loader，好在parcel提供了一个加载Vue文件的插件 parcel-plugin-vue，里面也有具体的demo，这里不再赘述。
NODE_ENV=production parcel build index.html -d build
parcel-bundler
--no-minify
The text was updated successfully, but these errors were encountered:
No branches or pull requests
什么是parcel
网上关于parcel的报道很多，其实也是个和webpack类似的资源打包编译工具，官网上对其主要的宣传点还是在打包更快速，零配置，入口支持html,css,js...
当然，听到这里，或许每个人都想去尝鲜。因为我现在项目主要的技术栈是vue，所以我们来基于Vue来试试parcel 到底怎么样。
环境安装
运行以下命令，安装parcel:
准备ES6+ 环境
按照官方的说法，0配置，理论上我什么都不安装即可以完成项目的构建，于是乎我兴高采烈的创建了一个main.js用来作为我ES6的测试文件：
再建立一个index.html作为其入口文件：
当我们愉快的运行
parcel index.html的时候报错了：很显然，说
transform-runtime模块在.babelrc文件中找不到....oh fuck，行吧，我就依你！# 安装依赖 npm i babel-plugin-transform-runtime --save-dev建立
.babelrc文件{ "plugins": [ "transform-runtime" ] }再次运行命令，终于编译成功了，产生了两个目录，一个是
.cache一个是dist目录。.cache存放的是编译缓存文件，可以提高parcel再次打包编译的速度。dist便是我们最终生成的资源文件。Vue环境
首先是准备我们的Vue包
npm install vue --save然后改写我们的main.js
访问
localhost:12345一切正常。单文件组件
由于这里我们没有任何配置，没办法像webpack那样记载vue-loader，好在parcel提供了一个加载Vue文件的插件 parcel-plugin-vue，里面也有具体的demo，这里不再赘述。
使用中的一些问题
NODE_ENV=production parcel build index.html -d build无意中抛了一个错误:然后去parcel issues 里面找了好久，终于找到了一些回答：How to compress the packaged files? parcel-bundler/parcel#390，大致是说，
parcel-bundler版本如果低于1.3， build 的时候压缩会出现问题，必须带上--no-minify参数。The text was updated successfully, but these errors were encountered: