Backpack 简介

Backpack 是一个用于构建现代 Node.js 应用的构建系统，支持零配置或最小化配置。它支持最新的 JavaScript 语法，并集成了文件监听、实时重载、代码转译和打包功能——这些正是我们在前几章中通过 webpack 手动实现的任务。我们可以将其视为 webpack 的封装工具，相当于本书目前所用 webpack 配置的简化版本。您可以通过 https://github.com/jaredpalmer/backpack 获取更多关于 Backpack 的信息。接下来，让我们在后续章节中探索如何运用它来加速应用开发。

安装和配置 Backpack

使用 Backpack 创建现代 Node.js 应用只需简单几步即可实现：

  1. 通过 npm 安装 Backpack：

    $ npm i backpack-core

  2. 在项目根目录创建 /src/ 文件夹和 package.json 文件，并在 dev 脚本中配置 backpack：

    {
  "scripts": {
    "dev": "backpack"
  }
}

    注意：必须将 /src/ 作为应用的 默认入口目录。

  3. 在项目根目录创建 Backpack 配置文件，通过函数自定义 webpack 配置：

    // backpack.config.js
module.exports = {
  webpack: (config, options, webpack) => {
    // 自定义配置...
    return config
  }
}

    这一步是可选的，但如果你想更改应用程序的默认入口目录（即你在第 2 步中创建的 /src/ 目录）为另一个目录，例如 /server/ 目录，那么可以按如下方式操作：

    webpack: (config, options, webpack) => {
  config.entry.main = './server/index.js'
  return config
}

  4. 通过以下命令启动开发模式：

    $ npm run dev

之后即可在 /server/ 目录下开发应用代码，并通过浏览器访问指定端口查看应用。接下来，我们将用 Backpack 创建一个简单的 Express 应用。

使用 Backpack 创建一个简单的应用

使用 Backpack 创建 Express 应用只需遵循以下简单步骤：

  1. 通过 npm 安装 Express：

    $ npm i express

  2. 在 package.json 中添加 build 和 start 脚本（紧随 dev 脚本之后）：

    package.json
    "scripts": {
  "dev": "backpack",
  "build": "backpack build",
  "start": "cross-env NODE_ENV=production node build/main.js"
}

  3. 创建 Backpack 配置文件，并指定 /server/ 作为应用入口目录（如前文所述）：

    // backpack.config.js
module.exports = {
  webpack: (config, options, webpack) => {
    config.entry.main = './server/index.js'
    return config
  }
}

  4. 创建包含 'Hello World' 的简单路由：

    // server/index.js
import express from 'express'
const app = express()
const port = 3000

app.get('/', (req, res) =>
  res.send('Hello World')
)

app.listen(port, () =>
  console.log(`Example app listening on port ${port}!`)
)

  5. 以开发模式运行应用：

    $ npm run dev

此时通过浏览器访问 127.0.0.1:3000 即可看到页面显示 "Hello World"。您可以在 GitHub 仓库的 /chapter-8/backpack/ 目录找到此示例。接下来，我们将使用 Koa 作为服务端框架——它能以更少的代码行数实现 ES2015 语法和异步函数，详见下一节内容。