集成 Express、Parcel 和 Vue

发表于 分类于 Waline： 阅读次数： 本文字数： 1.4k

最近终于动手整理项目的框架，总体思路和去年基本一致，“无状态”和“按功能模块分目录而不是按前后端”仍然是核心的思想，不过具体的工具发生了变化。

  • 数据存取这边用 GraphQL 取代 PouchDB ，在灵活性和可预测间做一个平衡；
  • 前端用 Vue 替换 Riot ，主要还是出于生态方面的考虑，虽然复杂度提升了一点，但是可用的第三方库丰富很多；
  • 最后用 Parcel 替换 Webpack 和 dev.js，Webpack4 据说简洁了不少，但还是有阴影，Vue 如果自己写 dev.js 也要比 Riot 的难一点，先用 Parcel 偷个懒把。

当然首要目标还是简化日常开发，于是花了两个小时把 Express、Parcel 和 Vue 集成到一起。做到每次启动后端进程的时候，Parcel 也会同时开始工作，不需要执行另外的命令，也不会占用额外的端口。Parcel 如果不单独占用端口，在项目多的时候，配置起来会清爽很多。

目录与文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.
├── index.js
├── dist
└── src
    ├── admin
    │   ├── index.js
    │   ├── index.html
    │   ├── admin.js
    │   └── components
    └── app
        ├── index.js
        ├── index.html
        ├── app.js
        └── components

目录和去年的思路一致，admin 和 app 都是功能模块，且结构相似，每个都包含自己的服务端文件和客户端文件。下面的内容以 admin 为例。

/index.js （根目录下的）

1
2
3
4
5
6
7
8
9
10
11
12
13
const express = require('express');
const app = express();

const admin = require('./src/admin');
app.use('/admin', admin);

app.use(express.static('dist'));

app.get('/', (req, res) => {
  res.end('Hello, World!');
});

app.listen('3000');

这里启动了一个 express 实例监听 3000 端口，重点在于第 4-5 行，把 /src/admin/index.js 做为 middleware 挂载到 app 上，原理我在这里讲过正确模块化，express 的 app.use

第 7 行把 dist 做为静态文件目录，因为 Parcel 编译的结果都会放到这个这个目录里来，没有这一行的话，后面访问 Parcel middleware 提供的地址时，会出现找不到 JavaScript 文件的情况。

/src/admin/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const path = require('path');

const express = require('express');
const app = express();

const Bundler = require('parcel-bundler');

const entry = path.join(__dirname, 'index.html');
const bundler = new Bundler(entry);
app.use('/index', bundler.middleware());

... 其他 admin 模块的接口

module.exports = app;

引入 parcel-bundler ，以同目录下的 index.html 为入口进行打包，并以 middleware 的形式集成到 express 实例中，也就是将新的入口文件集成到 /admin/index 这个地址

/src/admin/index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>
    <div id="app-2">
      <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
      </span>
    </div>
    <div id="app-3">
      <span v-if="seen">Now you see me</span>
    </div>
    <div id="app-4">
      <ol>
        <li v-for="todo in todos">
          {{ todo.text }}
        </li>
    </div>
    <div id="app-5">
      <p>{{ message }}</p>
      <button v-on:click="reverseMessage">逆转消息</button>
    </div>
    <div id="app-6">
      <p>{{ message }}</p>
      <input v-model="message">
    </div>
    <div id="app-7">
      <ol>
        <todo-item
          v-for="item in groceryList"
          v-bind:todo="item"
          v-bind:key="item.id">
        </todo-item>
      </ol>
    </div>
  </body>
  <script src="./admin.js"></script>
</html>

基于 vue 模版的 html 文件，内容是 vue 官方文档中的几个例子，
倒数第二行的 script 引用了同目录下的 admin.js，Parcel 编译后，这个 html 文件大体上保持原来的样子，只是这一行变成了引用编译后生成的文件名

1
<script src="./admin.20f23d0e.js"></script>

其中引用的 admin.20f23d0e.js 就是 Parcel 打包后的 JavaScript 文件。具体文件名根据文件内容会有所不同。

/src/admin/admin.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import Vue from 'vue/dist/vue.esm.js';

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
});
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
});
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' },
    ]
  }
});
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('');
    }
  }
});
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
});
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
});
var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      {id: 0, text: '蔬菜' },
      {id: 1, text: '奶酪' },
      {id: 2, text: '随便其它什么人吃的东西' },
      ]
  }
});

这个文件的内容是 vue 官网文档例子的 JavaScript 部分，此文件会被打包成 admin.20f23d0e.js ，需要注意的是第一行引用的是 vue/dist/vue.esm.js 而不是单纯的 vue ，不然会提示 You are using the runtime-only build。Vue 提供了多个版本，这里需要使用包含编译器的版本，具体可以参考官方文档中对不同文件名的说明

最后打包完的内容被放在了根目录下的 dist 目录中，而不是和 admin.js 同目录。配合上文提到的 /index.js 中的第 7 行的配置，就可以得到正确的结果了。

使用 node index.js 启动服务，parcel 也会被通过 api 调用的形式拉起来，访问 http://127.0.0.1:3000/admin/index 即可看到打包后的文件的运行效果。