在 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 buildnpm run dev 编译后就可以看到效果了。

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

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

使用 Vue

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

安装 Vue:

npm install --save-dev 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 buildnpm 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,语法部分 例如 constlet、箭头函数 之类的可以不需要引入,因为 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。

相关文章:

版权声明:本文为原创文章,版权归 Mr. Ma's Blog 所有,转载请联系博主获得授权!
本文地址:https://www.misterma.com/archives/868/
如果您对本文有什么问题或疑问都可以在评论区留言,我看到后会尽量解答。
最后编辑:2020年05月04日 ©著作权归作者所有

发表评论

正在加载 Emoji

已有 2 条评论

  1. 你这个牛逼了,每次进来,没有哪一次我能看懂的文章的,哈哈,技术达人🤣

    1. @zmmio

      哈哈,我只是个爱折腾的小白,还不是技术达人。