parcel打包工具入门

2018-06-04 本文已影响5人 Lia代码猪崽

一、安装

我使用的是npm：

npm install -g parcel-bundler

使用以下命令在你的项目目录中创建一个 package.json 文件：

npm init -y

Parcel 可以将任何类型的文件作为入口点(entry point) ，但是 HTML 或 JavaScript 文件是一个很好的开始。如果你使用相对路径将你的主 JavaScript 文件链接到 HTML 中，Parcel 也会为你处理，并将该引用替换为输出文件的 URL 。

接下来，创建一个 index.html 和引入一个index.js 文件。

index.html:
<html>
<body>
  <script src="./index.js"></script>
</body>
</html>

如果想要使用sass（node-sass）和es6（babel-polyfill），先用npm安装：

npm install node-sass
npm install --save babel-polyfill

在index.js里引入：

index.js:
import 'babel-polyfill'
// 直接引入scss文件就行了！
import 'common.scss'

Parcel 内置了一个开发服务器，这会在你更改文件时自动重建你的应用程序，并支持模块热替换，以便你快速开发。你只需指定入口文件即可：

parcel index.html

也可以在package.json文件里配置好

"scripts": {
    "start": "parcel index.html"
  },

然后使用

npm run start

现在在你浏览器中打开 http://localhost:1234/ 。您也可以使用 -p <port number> 选项覆盖默认端口。

模块热替换（HMR）通过在运行时自动更新浏览器中的模块，而不需要刷新整个页面来改进开发体验。这意味着应用程序状态可以在小的更改时保留。 Parcel 的 HMR 实现支持开箱即用的JavaScript 和 CSS 资源。在生产模式下打包时，HMR 自动被禁用。

直接打包

parcel build index.html

或者在package.json文件里配置好

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

打包命令包含以下选项：

假设我要做一个手机端的页面，部署上服务器的地址是：www.abcdefg.com/mobile/，项目地址在mobile文件夹里，需要修改提供服务的公共URL；
由于start的时候会把编译文件放在“dist”目录下，为了避免混淆，想要将打包的文件放在“build”目录下；

"scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html -d build --public-url /mobile/"
  },

PS：以下是个悲伤的故事

IE上JS脚本无法运行，在别的浏览器上报错。
在index.html中引入：

<script src = "https://cdn.polyfill.io/v2/polyfill.min.js"></script>