Backpack是Node.js项目的简约的构建系统丨前端开发者

背包随附“电池包”：

• 最新的ES6功能（包括模块语法，异步/等待，对象休息传播）
• SUPER友好的，人类可读的错误消息
• 实时重新加载（保存，添加/删除文件等）
• 零配置，一个依赖。

但是，您可以通过扩展底层Webpack 2配置来配置Backpack以满足项目需求。

请仔细阅读：如果您正在考虑使用带有React.js的背包，则应该使用Razzle。这是一个专门为SSR React构建的项目，具有几乎相同的API。

目录

• 如何使用
  • 自定义配置
  • 定制webpack配置
  • 定制babel配置
  • 建设生产
• CLI命令
  • backpack dev
  • backpack build
• 常问问题
• 灵感
• 作者

如何使用

安装它：

并像下面这样将一个脚本添加到你的package.json中：

{
   “ scripts ”：{
     “ dev ”：“ backpack ”
  }
}

之后，只有几个 公约默认值：

• src/index.js：您的应用程序的输入。

…其实就是这样。

然后你可以在开发模式下运行你的应用程序：

成功的构建将显示这样的控制台。注意：从运行基本示例获取的屏幕截图

自定义配置

对于自定义高级行为，您可以backpack.config.js在项目目录的根目录（旁边package.json）中创建一个。

// backpack.config.js 
//重要提示：此文件未经过babel转换。
//然而，您可以使用Node.js版本支持的ES2015功能。
模块。exports  = {
   / * config options here * / 
}

定制webpack配置

// backpack.config.js 
模块。exports  = {
   webpack ：（ config， options， webpack） => {
     //执行自定义配置
    //重要：返回修改后的配置
    返回配置
  }
}

定制babel配置

例

为了扩展我们的用法babel，您可以.babelrc在应用程序的根目录下定义一个文件。该文件是可选的。

如果找到，Backpack会认为它是真相的来源。因此它必须定义背包需要什么，这是backpack-core/babel预设。

这是为了让您对我们对默认babel配置所做的修改不感到惊讶。

这是一个示例.babelrc文件：

{
   “ presets ”： [
     “背包核心/巴贝尔”，
     “阶段0 ”
  ]
}

注意：这与Next.js完全一样。

建设生产

为构建步骤添加一个npm脚本：

{
   “ scripts ”：{
     “ dev ”：“ backpack ”，
     “ build ”：“ backpack build ”
  }
}

然后运行build命令并启动你的应用程序

npm运行构建
节点./build/main.js

CLI命令

backpack dev

以开发模式运行背包。

如果您进行编辑，您的代码将重新加载。
您会看到控制台中的构建错误，如下所示。

backpack build

构建应用程序以生产build文件夹。
它正确捆绑您的生产模式并优化构建以获得最佳性能。

您可以使用以下命令运行您的生产应用程序：

您的应用程序已准备好部署！

注意：确保将build目录添加到您的目录中，.gitignore以便将编译后的代码保存在您的git存储库中

常问问题

灵感

• jlong​​ster /后端与 – 的WebPack
• 纽约时报/ KYT
• 时代周报/ next.js
• facebookincubator /创建反应的应用内

作者

• 贾里德帕尔默（@jaredpalmer） – 帕尔默集团

原文：https://github.com/jaredpalmer/backpack

www.rokub.com