打包工具-- parcel

Parcel 是 Web 应用打包工具，适用于经验不同的开发者。它利用多核处理提供了极快的速度，并且不需要任何配置。

Parcel 可以使用任何类型的文件作为入口，但是最好还是使用 HTML 或 JavaScript 文件。如果在 HTML 中使用相对路径引入主要的 JavaScript 文件，Parcel 也将会对它进行处理将其替换为相对于输出文件的 URL 地址。

1. npm

npm install -g parcel-bundler

添加 parcel 到项目,安装parcel-bundler

	npm i parcel-bundler --save-dev

安装babel插件，将jsx语法转换成js对象（虚拟DOM）

npm i babel-core babel-preset-env babel-plugin-transform-react-jsx --save-dev

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "parcel-bundler": "^1.12.4"
 }

修改package.json来添加这些任务脚本

{
  "scripts": {
    "dev": "parcel <your entry file>",
    "build": "parcel build <your entry file>"
	}
}

"scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
 },

运行

# 以开发模式运行
yarn dev
# 或
npm run dev  或者 parcel index.html

# 以生成模式运行
yarn build
# 或
npm run build