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? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in 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: