简单的 NPM 包捆绑/供应？答案

【问题标题】：Simple NPM package bundling/vendoring?简单的 NPM 包捆绑/供应？
【发布时间】：2019-05-08 16:47:50
【问题描述】：

免责声明：我主要是一名后端开发人员，没有丰富的 FE 知识。

我正在编写一个生成 HTML 的非 SPA Golang Web 应用程序，然后将其发送给用户。因为我想更好地更新和监控我的 Javascript/CSS 依赖项，所以我想切换到使用带有 package.json 文件的 NPM，而不是手动下载和附加 CSS 和 Javascript 库。这些是典型的 jquery、bootstrap 和 fontawesome。除此之外，我每页都有一个用于交互内容的 Javascript 文件。

例如

+ js
  lib.js    -> jquery, bootstrap, fontawesome
  - home    -> specific JS
  - account -> specific JS
  ...
+ css
  theme.css
  custom.css

但是，我认为没有简单的解决方案可以仅使用 npm install 并将已安装的软件包导出到 vendor.js 文件，并缩小。我查看了 webpack (go-webpack)，但整个树都在抖动、捆绑和填充，这非常复杂。此外，webpack 期望你在本地提供资源时运行一个开发服务器，做一些块魔法，并且仍然在每个 JS 文件中引用全局库。（防止被树摇走）

有没有更简单的方法可以将 package.json 文件转换为缩小的捆绑资产集？

【问题讨论】：

欢迎来到 StackOverflow！您可能想研究一下 webpack 的替代方案。一种流行的是browserify。它不像 webpack 那样神奇，但它可能就是你所需要的，而且要简单得多。毫无疑问，您会得到大量其他建议，但希望这会有所帮助。

标签： javascript npm webpack

【解决方案1】：

TLDR：'只见树木不见森林' - 在深入了解更高级的细节之前，只需获得webpack.config.js 的最小配置即可工作，例如如摇树、分块等......

您需要使用捆绑器（例如 Webpack 或 Parcel）将您的所有 JavaScript 资产捆绑到单个 JavaScript 文件中。我认为您一开始就尝试做太多事情：

webpack-dev-server
摇树
分块

由于这些是更高级的概念...也许您可以首先创建一个供您的应用程序使用的JavaScript 包（或基于每页的包）。这不会那么复杂，并且需要进入应用程序中以下文件的入口点：

应用程序的JavaScript 索引（这应该加载您的应用程序使用的JavaScript）
CSS 索引。（理想情况下，您有一个根样式文件来加载其他应用程序样式文件）

现在为您的应用程序资产设置适当的加载器和插件，例如MiniCssExtractPlugin、file-loader 等...，以加载和处理您的应用程序资产。一切正常后，只需将生成的捆绑包附加到根html 索引页面中的<script> 标记中，而不是最初配置webpack-dev-server。这将允许您的应用程序使用捆绑的JavaScript 文件，而无需配置webpack-dev-server. 要创建新的捆绑包，请在package.json 文件的scripts 部分中创建自定义命令，类似于：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack -p --progress --config webpack.config.js",
    "dev-build": "webpack --progress -d --config webpack.config.js",
    "watch": "webpack --progress -d --config webpack.config.js --watch"
  },

只有在一切正常之后，您才应该担心更高级的性能提升，例如：分块/treeshaking/等...看看以下教程可能会有所帮助：Intro to Webpack和Full Stack Web application。请注意，第二个教程有点过时，因为事实上现在是使用 create-react-app cli 而不是自己为 react 项目设置构建配置，但原则是合理的，并向您展示如何去做设置您自己的构建配置。

希望对您有所帮助！

【讨论】：