简单的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文件中。Iv'e看了webpack (去-webpack)，但这可怕的复杂与整个树摇动，捆绑和闪烁。此外，webpack希望您在本地服务资产时运行开发服务器，执行一些块魔术，并且仍然在每个JS文件中引用全局库。(防止树被摇动)

是否有更容易的方法从一个package.json文件到一个小型化、捆绑的资产集？

Answer 1

TLDR：“你不能看到树木的森林”--在深入研究更高级的细节之前，只需得到最小的webpack.config.js配置，如摇树、分块等等.

您需要使用一个绑定器(如Webpack或包裹 )将所有JavaScript资产打包到一个JavaScript文件中。我觉得你一开始做的太多了：

• webpack开发服务器
• 树摇动
• 块状

因为这些是更先进的概念..。也许您可以首先创建一个JavaScript包(或者在每个页面的基础上创建一个包)，供您的应用程序使用。这不会那么复杂，需要进入应用程序中的以下文件的入口点：

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

现在为应用程序的资产(如MiniCssExtractPlugin、file-loader等)设置适当的加载器和插件，以加载和处理应用程序的资产。一旦一切正常，只需将生成的包附加到根<script>索引页中的html标记中，而不是最初配置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"
  },

只有在一切都正常工作之后，您才应该担心更高级的性能增益()，例如:分块/树搜索/等等.看看下面的教程，因为它们可能会有所帮助：Webpack简介和全堆栈Web应用程序。注意，第二个教程有点过时，因为实际上现在应该使用create-react-app cli，而不是自己为react项目设置构建配置，但是原则是合理的，并向您展示如何设置您自己的构建配置。

希望这能帮上忙！