如何在“传统网站”上使用 node_modules？答案

【问题标题】：How to use node_modules on a "traditional website"?如何在“传统网站”上使用 node_modules？
【发布时间】：2019-06-23 23:54:36
【问题描述】：

我使用 node 来管理对 React 应用程序等的依赖关系，在那些你使用 package.json 来跟踪库并使用 ES6 导入模块语法在脚本中使用它们的应用程序中。

但现在我正在开发一个遗留代码库，它使用一堆 jQuery 插件（手动下载并放置在“libs”文件夹中）并使用脚本标签将它们直接链接到标记中。

我想使用 npm 来管理这些依赖项。是我唯一的选择：

运行 npm init
通过 npm 安装所有插件并将它们放在 package.json 中
直接从标记链接到 node_modules 文件夹中的脚本：

<script src="./node_modules/lodash/lodash.js"></script>

或者有更好的方法吗？

【问题讨论】：

这是 Grunt 和 Gulp 以及 NodeJS 任务管理器工具集的所有其余部分的全部前提。不建议将整个 node_modules 文件夹公开为 Web 服务器上的公共资源。我建议使用任务管理器，编写一个“构建”任务，将 JavaScript 源文件从 node_modules 复制到包含服务器静态资产的文件夹中。
@RandyCasburn 明白了，谢谢！

【解决方案1】：

我推荐Parcel js。

那么你只需要：

和包裹一起跑

【讨论】：

【解决方案2】：

查看此tutorial，了解从使用脚本标签到与 Webpack 捆绑的过程。您需要执行以下操作：（按照您在问题中提到的执行步骤 1 和 2，然后您的步骤 3 将更改为以下 3 个步骤）

使用 npm 下载 webpack：npm install webpack --save-dev
创建一个webpack.config.js 文件，指定您的入口文件和输出文件。您的入口文件将包含 您的应用正在使用的任何自定义 JS 组件。您还需要指定在生成的 Javascript 包中包含您的 node_modules。您的输出文件将是 Webpack 将为您创建的结果 Javascript 包，它将包含您的应用程序运行所需的所有必要 Javascript。一个简单的例子webpack.config.js 如下：
```
const path = require('path');
    module.exports = {
      entry: './path/to/my/entry/file.js',
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'my-first-webpack.bundle.js'
      },
      resolve: {
        alias: {
          'node_modules': path.join(__dirname, 'node_modules'),
        }
      }
    };
```
最后，在您的主 HTML 页面中添加一个 <script> 标记，指向您新生成的 Javascript 包：
```
<script src="dist/my-first-webpack.bundle.js"></script>
```

现在，您的 Web 应用程序应该可以像重构之旅之前一样工作了。

干杯

【讨论】：