Parcel是一款极速零配置Web应用打包工具，省去了webpack那样的繁琐配置。
它利用多核处理提供了极快的速度，并且不需要任何配置。

初始化

新建文件夹，然后运行

yarn init -y
# 或者
npm init -y

从而生成package.json文件

安装

通过 Yarn 或者 npm 安装 Parcel ：

yarn add parcel-bundler -D
# 或者
npm i parcel-bundler -D

配置package.json

"scripts": {
	"start": "parcel index.html --open",
	"build": "rmdir /s/q dist && parcel build index.html --no-source-maps --public-url ./"
},
"browserslist": [
  "> 1%",
  "last 2 versions",
  "not ie <= 8"
]

vue的注意事项

如果你是用parcel打包，那么在你项目的 package.json 中添加：

// ...
"alias": {
  "vue" : "./node_modules/vue/dist/vue.common.js",
  "css" : "./src/assets/css/"
},
"browserslist": [
  "> 1%",
  "last 2 versions",
  "not ie <= 8"
]

配置转译器

babel

新建.babelrc,yarn add babel-preset-env -D

1
2
3

{
  "presets": ["env"]
}

babel-polyfill

如果想让IE支持repeat()、Object.assign()等方法，那么yarn add babel-polyfill

1	import 'babel-polyfill'; //放在main.js顶部

postcss

新建.postcssrc,yarn add autoprefixer -D

{
  "plugins": {
    "autoprefixer": {
      "grid": true
    }
  }
}

hello word

在当前文件夹下，创建 index.html 和 main.js 文件

<!-- index.html -->
<html>
<body>
  <script src="./main.js"></script>
</body>
</html>

1 2	//main.js alert('hello world')

然后运行npm start

打包

npm run build

parcel会自动install依赖

1	import Vue from 'vue'

此时，parcel会自动帮你install vue，不需要手动安装vue

1	import './src/style.less'

此时，parcel会自动帮你install less