Parcel.js + Vue 搭建笔记

桃扇骨 2022-05-19 03:11 235阅读 0赞

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

# 前言 #

去年年末便听得新一代打包工具 Parcel.js 的风风火火，今日也终于得以静下心来试一试。

## [Parcel][] ##

如官网所述，极速零配置 Web 应用打包工具。

*  GitHub : [https://github.com/parcel-bundler/parcel][https_github.com_parcel-bundler_parcel]

## [Vue][] ##

鼎鼎大名,自不多言。

--------------------

Vue 官方提供的模板 [vuejs-template/webpack][vuejs-template_webpack] 是基于 Webpack 打包的。所以尝试着用 parcel.js 来替代 webpack 与 vue 结合在一起。

### 自己的小 Demo ###

*  \[vue-parcel-demo\] : [https://github.com/YunYouJun/vue-parcel-demo][https_github.com_YunYouJun_vue-parcel-demo]

# 过程 #

## 初始化 ##

基本可以参照 [vuejs-template/webpack][vuejs-template_webpack] 进行修改。

`vue init webpack vue-parcel-demo` 使用 vue 脚手架生成 webpack 模板

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
9
</pre> </td> 
   <td> <pre>? Project name vue-parcel-demo
? Project description A Vue.js project
? Author YunYouJun &lt;me@yunyoujun.cn&gt;
? Vue build runtime | Runtime-only
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) yarn
</pre> </td> 
  </tr> 
 </tbody> 
</table>

*  删除 `build`, `config`, `static`, `node_modules`（之后重装） 文件夹与 `.editorconfig`, `.postcssrc.js`, `package.json`（之后重新生成） 文件。
 *  `README.md`（可以重写）
 *  进入文件夹下，执行 `yarn init` （配置默认即可）

## 安装依赖 ##

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
</pre> </td> 
   <td> <pre>yarn add vue vue-router parcel-bundler babel-preset-env --dev
</pre> </td> 
  </tr> 
 </tbody> 
</table>

[parcel-plugin-vue][]

> parcel-bundler/parcel @1.7.0 support Vue Now. This plugin will be not recommended.

Parcel 1.7.0 版本似乎已经支持 Vue 了。所以不需要再安装 `parcel-plugin-vue` 插件了。（默默删去了一段）

(果然配置越来越少 2333，再之后这篇文章说不定都没有存在的必要了。)

--------------------

虽说零配置，实际上是 Parcel 帮我们把要配置的东西做了。

在打包 Vue 的时候，发现它调用 yarn 安装了几个插件。当然我们也可以自己先安装上。

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
</pre> </td> 
   <td> <pre>yarn add -D vue-template-compiler @vue/component-compiler-utils vue-hot-reload-api
# -D 与 --dev 一个意思，将依赖安装在 devDependencies
</pre> </td> 
  </tr> 
 </tbody> 
</table>

## Babel 配置 ##

[Babel 中文网][Babel]

修改 `.babelrc` 文件如下

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
</pre> </td> 
   <td> <pre>{
  "presets": ["env"]
}
</pre> </td> 
  </tr> 
 </tbody> 
</table>

## index.html ##

[网页头部的声明应该是用 lang=”zh” 还是 lang=”zh-cn”？ - 知乎][lang_zh_ _ lang_zh-cn_ -]

emmm, 纠结地搜到了这个答案。简体中文页面原来是用 `lang="zh-cmn-Hans"`

### 引入 `main.js` ###

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
</pre> </td> 
   <td> <pre>...
&lt;body&gt;
  &lt;div id="app"&gt;&lt;/div&gt;
  &lt;script src="./src/main.js"&gt;&lt;/script&gt;
&lt;/body&gt;
...
</pre> </td> 
  </tr> 
 </tbody> 
</table>

## `package.json` 添加 `scripts` 字段 ##

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
</pre> </td> 
   <td> <pre>{
  "name": "vue-parcel-demo",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "https://github.com/YunYouJun/vue-parcel-demo",
  "author": "YunYouJun &lt;me@yunyoujun.cn&gt;",
  "license": "MIT",
  "scripts": {
    "start": "npm run dev",
    "dev": "parcel index.html -p 2333 --open",
    "build": "parcel build index.html --public-url ./ --no-cache"
  },
  "devDependencies": {
    "@vue/component-compiler-utils": "^1.2.1",
    "babel-preset-env": "^1.7.0",
    "node-sass": "^4.9.0",
    "parcel-bundler": "^1.8.1",
    "vue": "^2.5.16",
    "vue-hot-reload-api": "^2.3.0",
    "vue-router": "^3.0.1",
    "vue-template-compiler": "^2.5.16"
  },
  "dependencies": {}
}
</pre> </td> 
  </tr> 
 </tbody> 
</table>

*  `-p 2333` 设置端口号为 `2333`
 *  `--open` 自动打开浏览器
 *  `--public-url ./` 设置要提供服务的公共 URL(`./` 也就是设置为当前 `dist` 目录下)
 *  `--no-cache` 禁用文件系统缓存

## .gitignore ##

使用 git 管理仓库时，切记添加自定义忽略文件

*  `.cache` 是 `parcel` 构建时的缓存
 *  `dist` 是打包后的文件

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
9
</pre> </td> 
   <td> <pre># Custom
.cache
dist

# ...

node_modules/

# ...
</pre> </td> 
  </tr> 
 </tbody> 
</table>

如果使用 VS Code 编辑器，也可以对工作区进行配置，不对 `.cache` `dist` 等文件夹进行搜索。

[搜索排除][Link 1]

## Command ##

*  `npm run dev` 运行
 *  `npm run build` 构建

输入 `npm run dev` 运行试试。

出现如下报错：

> Server running at [http://localhost:1234][http_localhost_1234]  
> × C:\\Users\\YunYou\\Documents\\GitHub\\vue-parcel-demo\\src\\router\\index.js:3:23: Cannot resolve dependency ‘@/components/HelloWorld’

原因是 `@` 是 webpack 默认配置中使用 alias (别名) 指代 src 文件夹的符号。

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
9
</pre> </td> 
   <td> <pre>// 位于 build/webpack.base.conf

resolve: {
    // 路径别名
    alias: {
        '@': resolve('src'),
        'vue$': 'vue/dist/vue.esm.js' // 这一个之后解释
    }
},
</pre> </td> 
  </tr> 
 </tbody> 
</table>

进入 `src/router/index.js` , 将路径修改为相对路径

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
</pre> </td> 
   <td> <pre>import HelloWorld from '@/components/HelloWorld'
---
import HelloWorld from '../components/HelloWorld'
</pre> </td> 
  </tr> 
 </tbody> 
</table>

再次运行 `npm run dev`, 打开 [http://localhost:1234][http_localhost_1234] 即可看到 Vue 的主页了。

# FAQ #

## [运行时 + 编译器 vs. 只包含运行时][_ _ vs.] ##

在使用 vue 脚手架 `vue init webpack vue-parcel-demo` 生成 vue-webpack 模板过程中，有如下提示：

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
</pre> </td> 
   <td> <pre>? Vue build (Use arrow keys)
&gt; Runtime + Compiler: recommended for most users
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere
</pre> </td> 
  </tr> 
 </tbody> 
</table>

如果选择 `Runtime + Compiler` ,此后会发生如下报错。

> \[Vue warn\]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.(found in )

因为 [vuejs-templates/webpack][vuejs-template_webpack] 的 `main.js` 源码如下

[vuejs-templates/webpack/template/src/main.js][vuejs-templates_webpack_template_src_main.js]

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
9
10
11
12
13
</pre> </td> 
   <td> <pre>new Vue({
  el: '#app',
  {
      {#router}}
  router,
  {
      {/router}}
  {
      {#if_eq build "runtime"}}
  render: h =&gt; h(App)
  {
      {/if_eq}}
  {
      {#if_eq build "standalone"}}
  components: { App },
  template: '&lt;App/&gt;'
  {
      {/if_eq}}
})
</pre> </td> 
  </tr> 
 </tbody> 
</table>

如果选择 `Runtime + Compiler`, `main.js` 为

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
</pre> </td> 
   <td> <pre>...
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '&lt;App/&gt;'
})
</pre> </td> 
  </tr> 
 </tbody> 
</table>

如果选择 `Runtime-only`, `main.js` 则为

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
</pre> </td> 
   <td> <pre>...
new Vue({
  el: '#app',
  router,
  render: h =&gt; h(App)
})
</pre> </td> 
  </tr> 
 </tbody> 
</table>

Vue 模板中 webpack 的默认配置通过 alias 设置了 vue 的别名，引用了完整版的 vue 。

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
9
</pre> </td> 
   <td> <pre>// 位于 build/webpack.base.conf

resolve: {
    // 路径别名
    alias: {
        '@': resolve('src'),
        'vue$': 'vue/dist/vue.esm.js' // 即此处
    }
},
</pre> </td> 
  </tr> 
 </tbody> 
</table>

最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。

Parcel 使用 `runtime-only`, 修改 `main.js` 中内容为 `Runtime-only` 形式 `render: h => h(App)` 即可。

原文链接：[https://yunyoujun.cn/note/vue-parcel-demo/][https_yunyoujun.cn_note_vue-parcel-demo]

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

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

[Fundebug]: https://www.fundebug.com/
[Parcel]: https://parceljs.org/
[https_github.com_parcel-bundler_parcel]: https://github.com/parcel-bundler/parcel
[Vue]: https://cn.vuejs.org/
[vuejs-template_webpack]: https://github.com/vuejs-templates/webpack
[https_github.com_YunYouJun_vue-parcel-demo]: https://github.com/YunYouJun/vue-parcel-demo
[parcel-plugin-vue]: https://github.com/BoltDoggy/parcel-plugin-vue
[Babel]: https://babeljs.cn/
[lang_zh_ _ lang_zh-cn_ -]: https://www.zhihu.com/question/20797118
[Link 1]: https://yunyoujun.cn/note/vscode-config-note/#%E6%90%9C%E7%B4%A2%E6%8E%92%E9%99%A4
[http_localhost_1234]: http://localhost:1234/
[_ _ vs.]: https://cn.vuejs.org/v2/guide/installation.html#%E8%BF%90%E8%A1%8C%E6%97%B6-%E7%BC%96%E8%AF%91%E5%99%A8-vs-%E5%8F%AA%E5%8C%85%E5%90%AB%E8%BF%90%E8%A1%8C%E6%97%B6
[vuejs-templates_webpack_template_src_main.js]: https://github.com/vuejs-templates/webpack/blob/develop/template/src/main.js
[https_yunyoujun.cn_note_vue-parcel-demo]: https://yunyoujun.cn/note/vue-parcel-demo/
[1386816-20180502112633892-1858746955.png]: /images/20220519/9444892842e44441850865f835d9e5e4.png