javascript - 简单的 NPM 包捆绑/销售？

Question

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

我正在编写一个非 SPA Golang Web 应用程序，它生成 HTML，然后将其发送给用户。 因为我想更好地更新和监控我的 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 希望您在本地提供资源时运行开发服务器，执行一些 block 魔法，并且仍然在每个 JS 文件中引用全局库。 (防止被树摇走)

是否有更简单的方法将 package.json 文件转换为精简的捆绑资源集？

Answer 1

TLDR:“只见树木，不见森林” - 只需获得 webpack.config.js 的最低配置即可在深入研究更高级的细节之前先工作，例如树摇动、分块等......

您需要使用 bundler ，例如 Webpack或Parcel ，捆绑您所有的 JavaScript Assets 成单JavaScript文件。我认为你一开始就想做太多事情:

• webpack-dev-server
• 摇树
• 分块

由于这些是更高级的概念...也许您可以从最初创建一个 JavaScript 开始。您的应用程序将使用的 bundle (或基于每页的 bundle )。这不会那么复杂，并且需要应用程序中以下文件的入口点:

1. 应用程序的JavaScript索引(这应该加载您的应用程序使用的 JavaScript)
2. CSS指数。 (理想情况下，您有一个加载其他应用程序样式文件的根样式文件)

现在为您的应用程序 Assets 设置适当的加载器和插件，例如 MiniCssExtractPlugin , file-loader等等...来加载和处理应用程序的 Assets 。一旦一切正常，只需将生成的 bundle 附加到 <script> 中即可。根目录中的标签 html索引页面，而不是最初配置 webpack-dev-server 。这将允许您的应用程序使用捆绑的 JavaScript文件，无需配置 webpack-dev-server.要创建新的 bundle ，请在 scripts 中创建自定义命令您的package.json部分文件，大致如下:

"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 设置构建配置项目，但是原则是合理的，并向您展示如何设置您自己的构建配置。

希望有帮助!