Question

免责声明：我主要是一个不具备丰富的有限知识的后端开发人员。

我正在编写一个非SPA Golang Web应用程序，该应用程序生成HTML，然后将其发送给用户。因为我想更好地更新和监视Javascript / CSS依赖项，所以我想切换到将NPM与package.json文件一起使用，而不是手动下载和附加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文件到缩小的捆绑资产集是否有更简便的方法？

Answer 1

TLDR ：“您看不到树木茂盛的森林” -在深入研究更高级的细节之前，只需简单配置webpack.config.js例如摇树，分块等...

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

webpack-dev-server
摇树
分组

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

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

现在为应用程序资产设置适当的加载程序和插件，例如MiniCssExtractPlugin，file-loader等，以加载和处理应用程序资产。一切正常后，只需将此生成的捆绑包附加到根<script>索引页中的html标记中，而不用最初配置webpack-dev-server。这将使您的应用程序无需配置JavaScript就可以使用捆绑的webpack-dev-server.文件。要创建新的捆绑包，请在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"
  },

只有在一切正常后，您才需要担心更高的性能提升，例如：分块/树状摇动/等...请看以下教程，因为它们可能会有所帮助：{{3 }}和Intro to Webpack。请注意，第二个教程有些过时了，因为事实上现在将使用create-react-app cli来代替自己为react项目设置构建配置，但是原理是合理的，向您展示如何建立自己的构建配置。

希望有帮助！

简单的NPM软件包捆绑/供应商？

1 个答案: