Parcel 提供了Vue Plugin

梦里梦外; 2022-05-19 03:12 170阅读 0赞

> **小编推荐：**[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。

Parcel 是一个前端构建工具，Parcel 官网 将它定义为极速零配置的Web应用打包工具。没错，又是一个构建工具，你一定会想，为什么前端的构建工具层出不穷，搞那么多工具又要花时间去学习，真的有意义吗？在 webpack 已经成为前端构建工具主流的今天，一个新的工具能有什么优势来站稳脚跟呢？

[![f906e1ad3f6dd625ce093f87b970db4c.jpg-wh_651x-s_805376182.jpg][]][f906e1ad3f6dd625ce093f87b970db4c.jpg-wh_651x-s_805376182.jpg]

**前言**

**为什么要用 Parcel**

一个好的打包工具在前端工程中占着比较重要的地位。然，何谓之好？或功能强大，或简单易用，或提高效率，或适合自己。在时代不断发展中，一个个好的工具正在被一个更好的工具所替代。随着对 webpack 复杂配置的吐槽声越来越多，Parcel 打着 “快速、零配置” 的旗子出来了。

**Parcel 的特性**

*  快速打包：启用多核编译，并具有文件系统缓存
 *  打包所有资源：支持JS，CSS，HTML，文件资源等等 - 不需要安装任何插件
 *  自动转换：使用 Babel，PostCSS 和 PostHTML 自动转换
 *  零配置代码拆分：使用动态 import() 语法拆分您的输出包，只加载初始加载时所需的内容
 *  模块热替换：不需要进行任何配置
 *  友好的错误记录：以语法高亮的形式打印的代码帧，以帮助你查明问题

**如何使用**

**快速使用**

全局安装 npm i parcel-bundler -g 或 yarn add parcel-bundler global

Parcel 使用一个文件作为入口，最好是 HTML 或 JavaScript 文件，我们在项目中新建 index.html 文件，直接运行命令 parcel index.html 即可启动本地服务器

在浏览器中访问 http://localhost:1234/ ，可以通过 parcel index.html -p 8888 重新设置端口号。

无需配置文件！

Parcel 支持 CommonJS 模块语法、ES6 模块语法、在 js 文件中导入 node 模块或 css、在 css 中使用 import 等，也都无需配置文件！

1.   
2.  <!DOCTYPE html> 
3.  <html lang="en"> 
4.      <head> 
5.          <title>Parcel</title> 
6.          <meta charset="UTF-8"> 
7.      </head> 
8.      <body> 
9.          <h1>Hello Parcel</h1> 
10.         <script src="src/js/index.js"></script> 
11.     </body> 
12. </html>

1.  // src/js/index.js 
2.  const main1 = require('./main1.js');    // 支持 CommonJS 模块语法 
3.  import main2 from './main2.js';         // 支持 ES6 模块语法 
4.  import '../css/index.css';              // 支持在 js 中导入 css 
5.  main1(); 
6.  main2();

上面只是简单的使用了 Parcel，但在实际项目中，我们会用到各种技术栈，下面我们来看看 Parcel 如何集成各种技术栈的。

注意：Parcel 里使用了 async await，因此需要 node 7.6 以上的版本才支持

**集成技术栈**

首先在项目下创建 package.json 、.babelrc、以及 index-react.html、index-vue.html、index-ts.html 三个作为各自技术栈 demo 的入口文件。

在 package.json 中添加以下命令

1.  "scripts": \{ 
2.    "react": "parcel index-react.html", 
3.    "vue": "parcel index-vue.html", 
4.    "ts": "parcel index-ts.html" 
5.  \}

**React**

安装 React 的相关依赖 npm i -S parcel-bundler react react-dom babel-preset-env babel-preset-react

在 .babelrc 中添加

1.  \{ 
2.    "presets": \["env","react"\] 
3.  \}

这就是上面讲到的 Parcel 的特性：自动转换。该文件是让 Parcel 自动转换 ES6 和 React JSX。

1.   
2.  <!DOCTYPE html> 
3.  <html lang="en"> 
4.      <head> 
5.          <title>Parcel React</title> 
6.          <meta charset="UTF-8"> 
7.      </head> 
8.      <body> 
9.          <div id="react-app"></div> 
10.         <script src="src/react/index.js"></script> 
11.     </body> 
12. </html>

运行命令 npm run react 打开 http://localhost:1234/ 即可看到 Hello React

**Vue**

就在不久前，Parcel 终于支持 .vue 文件了，只需要引入一个包 parcel-plugin-vue，不需要任何配置，即可打包 Vue 了。

安装 Vue 相关依赖，npm i -S vue parcel-plugin-vue

1.   
2.  <!DOCTYPE html> 
3.  <html lang="en"> 
4.      <head> 
5.          <title>Parcel Vue</title> 
6.          <meta charset="UTF-8"> 
7.      </head> 
8.      <body> 
9.          <div id="vue-app"></div> 
10.         <script src="src/vue/index.js"></script> 
11.     </body> 
12. </html>

1.  // src/vue/index.js 
2.  import Vue from 'vue'; 
3.  import App from './app.vue'; 
4.  new Vue(\{ 
5.      el: '\#vue-app', 
6.      render: h => h(App) 
7.  \})

1.   
2.  <template> 
3.      <div> 
4.          <h1>Hello Vue</h1> 
5.      </div> 
6.  </template>

运行命令 npm run vue 打开 http://localhost:1234/ 即可看到 Hello Vue

**TypeScript**

集成 TypeScript 也非常简单，只需要安装 typescript 模块即可，也无需配置。

安装 TypeScript 相关依赖，npm i -S typescript

1.   
2.  <!DOCTYPE html> 
3.  <html lang="en"> 
4.      <head> 
5.          <title>Parcel TypeScript</title> 
6.          <meta charset="UTF-8"> 
7.      </head> 
8.      <body> 
9.          <h1 id="ts-app"></h1> 
10.         <script src="src/typescript/index.ts"></script> 
11.     </body> 
12. </html>

1.  interface Name \{ 
2.      value: string; 
3.  \} 
4.  function showName(name: Name)\{ 
5.      document.getElementById('ts-app').innerHTML = 'Hello ' + name.value; 
6.  \} 
7.  showName(\{value: 'TypeScript'\});

运行命令 npm run ts 打开 http://localhost:1234/ 即可看到 Hello TypeScript

**Sass**

将 Sass 在上面技术栈中使用也非常简单，只需要安装 node-sass 模块即可，也无需配置。

安装 Sass 相关依赖，npm 可能会下载不成功，这里使用 cnpm 来安装，cnpm i -S node-sass

在 src/vue/app.vue 中来使用 Sass

1.   
2.  <template> 
3.      <div class="main"> 
4.          <h1>Hello Vue</h1> 
5.      </div> 
6.  </template> 
7.  <style lang="scss"> 
8.      @import '../sass/main.scss'; 
9.  </style>

1.  .main\{ 
2.      h1\{ 
3.          color: \#0099ff; 
4.      \} 
5.  \}

再次运行命令 npm run vue 即可看到带有蓝色字体的 Hello Vue

以上的 demo 源码地址：parcel-demo

**生产环境**

*  设置环境变量： parcel build index.html NODE\_ENV=production
 *  设置输出目录： parcel build index.html -d build/output
 *  设置要提供服务的公共 URL： parcel build index.html --public-url ./
 *  禁用压缩： parcel build index.html --no-minify
 *  禁用文件系统缓存： parcel build index.html --no-cache

**疑问**

*  输出目录里是否可以再分子目录，例如 css / js / img 等？
 *  页面引用的 html 被打包后也会重命名成很长的一串，是否可以不重命名？

**前端情报局**

鉴于最近 Parcel 打着零配置的口号俘获了不少前端开发者的心，并且伴随着吐槽 webpack 使用配置复杂的声音。webpack 核心开发者特意解释道，webpack v4.0.0-alpha.1 中加入了 mode 这个配置，这使得很多复杂繁琐的配置（诸如： sourcemaps、 tree shaking,、minification、scope hoisting）webpack 都替我们做好了，对于使用者来说，基本上也是零配置了。

原文链接：[http://zhuanlan.51cto.com/art/201712/562415.htm][http_zhuanlan.51cto.com_art_201712_562415.htm]

[Fundebug][]提供JavaScript监控，支持所有主流前端框架，微信小程序监控，微信小游戏监控，后端Node.js监控。

![1386816-20180502112633892-1858746955.png][]

[Fundebug]: https://www.fundebug.com/
[f906e1ad3f6dd625ce093f87b970db4c.jpg-wh_651x-s_805376182.jpg]: /images/20220519/0ed0bcd0774742709371caeb4eaa74a3.png
[http_zhuanlan.51cto.com_art_201712_562415.htm]: http://zhuanlan.51cto.com/art/201712/562415.htm
[1386816-20180502112633892-1858746955.png]: /images/20220519/c7e30fd6981e4b4bada092182aebbb4d.png