在 Webpack 的使用中，配置文件算是 Webpack 比较难的一个部分。使用 Webpack 搭建一个项目，需要配置各种 Loader 和插件，对于不太熟悉的新手来说，非常容易出错。

PARCEL 是一个零配置的 Web 打包工具，不需要任何配置就能使用。对于不熟悉 Webpack 但又需要对前端资源进行打包的前端新手来说，使用 PARCEL 也是一个不错的选择。

安装

我这篇文章中使用的包管理工具是 npm。

使用 npm 初始化项目：

npm init -y

初始化完成后安装 PARCEL：

npm install parcel-bundler --save-dev

我上面是在本地项目中安装。

安装完成后在 package.json 中添加执行脚本：

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

把 script 中的 "dev": "parcel <your entry file>" 和 "build": "parcel build <your entry file>" 添加到 package.json 中的 script 中。

其中的 <your entry file> 就是你的入口文件名，PARCEL 会根据入口文件来查找所有关联的文件。

比如我的入口文件是 src/main.js，我的运行脚本就是下面这样的：

{
  "scripts": {
    "dev": "parcel src/main.js",
    "build": "parcel build src/main.js"
  }
}

打包

我的入口文件是 src/main.js，入口文件的内容如下：

import hello from './hello'; //  引入 hello.js
hello(); //  调用

hello.js 的内容如下：

export default () => {
  console.log('Hello PARCEL');
};

主要功能就是在控制台输出 Hello PARCEL。

开始打包：

npm run build

打包完成后会在项目根目录生成一个 dist 目录，打包后的文件就放在 dist 目录，文件名和入口文件的文件名是一样的。

PARCEL 可以支持 CommonJS 和 ES6 模块。

除了 JS 文件外，也可以用 HTML 文件作为入口文件，下面在 src 目录创建一个 index.html 并引入 main.js：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PARCEL测试</title>
</head>
<body>
    <script type="text/javascript" src="main.js"></script>
</body>
</html>

输入：

npm run build

HTML 文件和 JS 文件都会被打包到 dist 目录。

PARCEL 自带了本地服务器，输入：

npm run dev

可以开启本地服务器，如果文件内容发生改变，页面也会自动刷新。

JS 文件中也可以引入 CSS 文件，打包后会生成独立的 CSS 文件。如果入口文件是 HTML 的话，打包后会在 HTML 中自动引入 CSS 文件。

如果 CSS 中引入了字体文件的话，打包后字体文件也会被拷贝到 dist 目录。

使用 Sass

Sass 是 CSS 的一种扩展语言，有关 Sass 的说明和教程可以看 Sass 简单使用教程

PARCEL 虽然不用配置，但也需要安装相应的模块才能使用。下面安装 Sass：

npm install --save-dev sass

安装完成后就可以使用 Sass 了。

创建一个 SCSS 文件，使用 Sass 独有的功能添加一些样式：

@mixin title {
  color: #ff00ff;
  font-size: 72px;
  font-family: monospace;
}

h1 {
  @include title;
}

在 main.js 中引入 SCSS 文件：

import './style.scss'; //  引入 SCSS 文件
import hello from './hello'; //  引入 Hello 模块
hello();

使用 npm run build 或 npm run dev 编译后就可以看到效果了。

如果入口文件是 HTML 的话，编译完成后 HTML 会自动引入编译后的 CSS 文件。

如果你引入了 SCSS 文件，打包的时候 PARCEL 检测到你没有安装 Sass，PARCEL 也会自动帮你安装 Sass。也就是说你也可以不需要手动安装 Sass。

使用 Vue

PARCEL 不需要任何配置就能使用 Vue。

安装 Vue：

npm install --save vue

在 HTML 中引入 main.js：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PARCEL测试</title>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="main.js"></script>
</body>
</html>

在 main.js 中引入 Vue 和根组件，然后实例化 Vue 挂载组件：

import Vue from 'vue'; //  引入 Vue
import App from './App.vue'; //  引入 App 组件

new Vue({
  render: (h) => h(App),
}).$mount('#app');

下面是 App 组件的内容：

<template>
  <div>
    <h1>{{message}}</h1>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      message: '这是 Vue 的 App 组件'
    };
  }
};
</script>

<style scoped>
h1 {
  color: #ff00ff;
}
</style>

编译后就可以看到效果了。

使用 TypeScript

直接在 HTML 中引入 TS 文件，如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PARCEL测试</title>
</head>
<body>
    <script type="text/javascript" src="main.ts"></script>
</body>
</html>

main.ts 的内容如下：

import hello = require('./hello');
hello;

hello.ts 的内容如下：

export interface hello {
  var message: string = 'Hello PARCEL';
  alert(message);
}

直接输入 npm run build 或 npm run dev 打包，如果 PARCEL 检测到没有安装 TypeScript 就会自动安装。

使用 Babel

PARCEL 已经自带了 Babel 和 babel/preset-env，默认情况下就会使用 babel/preset-env 来转换 ES6 代码。不过 ES6 中新增的一些功能，例如 Promise 之类的还是无法转换，IE 还是用不了。

我安装了 @babel/core、@babel/preset-env、@babel/polyfill，并编写了 .babelrc 配置文件，在打包的时候还是无法转换 Promise 之类的功能，也不知道是哪里出了问题？

目前要转换 Promise 之类的功能只能在入口文件中手动引入 @babel/polyfill，打包后的文件差不多在 100K 上下。暂时不能和 Webpack 一样根据 .babelrc 按需加载用到的库。

如果只引入 @babel/polyfill 的话，就不需要安装 @babel/core 和 @babel/preset-env，因为 PARCEL 就自带了 @babel/core 和 @babel/preset-env。

只需要安装 @babel/polyfill：

npm install --save-dev @babel/polyfill

安装完成后在入口文件中引入 @babel/polyfill：

import '@babel/polyfill';

打包后 Promise 之类的功能就可以在 IE 中使用了。

除了使用 @babel/polyfill 外，也可以使用 core-js 来处理 ES6 中新增的功能，使用 core-js 可以只引入用到的功能。

安装 core-js：

npm install --save-dev core-js

安装完成后在 JS 入口文件中引入用到的 ES6 功能，如下：

import 'core-js/features/promise';
import 'core-js/features/map';

只有用到 ES6 中的新功能才需要引入 core-js，语法部分 例如 const、let、箭头函数 之类的可以不需要引入，因为 PARCEL 就自带了 @babel/preset-env。

CLI 命令选项

打包命令是可以包含选项的，下面是一些常用的选项说明。

--out-dir：

--out-dir 选项是设置输出文件的目录，默认会输出到 dist 目录，使用 --out-dir 可自定义输出的目录。

如果你是在本地安装的话，--out-dir 选项需要加到 package.json 中的 script 执行脚本的入口文件后面，如下：

{
  "build": "parcel build src/index.html --out-dir build/output"
}

上面设置的输出目录是 build/output 目录。

--public-url：

--public-url选项可以设置提供服务的公共 URL，默认为 /，在默认情况下，打包后的 HTML 引入 CSS 和 JS 的文件路径是下面这样的：

<script type="text/javascript" src="/main.005b2a34.js"></script>

在文件名前面会包含一个 /，如果你直接通过浏览器打开 HTML 文件的话，是无法读取 JS 文件的。可以把 --public-url 的值改为 ./，如下：

{
  "build": "parcel build src/index.html --public-url ./"
}

打包后的 HTML 引入 JS 和 CSS 的路径如下：

<script type="text/javascript" src="main.005b2a34.js"></script>

文件名前面的 / 已经不在了，现在使用浏览器直接打开 HTML 也能读取 JS 文件。

--port：

--port 选项可以设置本地服务器的端口，默认情况下本地服务器的端口是 1234。

如下：

{
  "dev": "parcel src/index.html --port 8080"
}

上面把本地服务器的端口设置为 8080。

--no-source-maps：

--no-source-maps 选项的作用是禁止生成 Source map 文件，用法如下：

{
  "build": "parcel build src/index.html --no-source-maps"
}

打包后就不会生成 js.map 文件了。

以上就是 PARCEL 的简单使用，PARCEL 有中文文档，更详细的说明可以访问 PARCEL中文网。PARCEL 无论是上手难度还是打包速度都要优于 Webpack，但是因为 PARCEL 可配置的地方比较少，在灵活度方面还是不如 Webpack。如果你的项目比较简单的话，可以考虑使用 PARCEL，PARCEL 不需要繁琐的配置，可以很快搭建起项目。如果你的项目比较复杂的话，PARCEL 可能还有一些功能无法实现，还是需要用 Webpack。

相关文章：