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

Question

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

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

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

• 运行 npm 初始化
• 通过 npm 安装所有插件并将它们放在 package.json 中

• 直接从标记链接到 node_modules 文件夹中的脚本：

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

或者，还有更好的方法？

Answer 1

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

1. 使用 npm 下载 webpack：npm install webpack --save-dev

2. 创建一个webpack.config.js指定输入文件和输出文件的文件。您的入口文件将包含您的应用程序正在使用的任何自定义 JS 组件。您还需要指定将 node_modules 包含在生成的 Javascript 包中。您的输出文件将是 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'),
           }
         }
       };
   

3. 最后，<script>在 HTML 主页面中添加一个标签，指向新生成的 Javascript 包：

   <script src="dist/my-first-webpack.bundle.js"></script>
   

现在，您的 Web 应用程序应该与重构之前一样工作。

干杯