javascript - 如何在 "traditional website"上使用 node_modules ？

Question

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

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

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

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

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

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

或者有更好的方法吗？

Answer 1

看看这个 tutorial从使用脚本标签到与 Webpack 捆绑。您需要执行以下操作:(按照您在问题中提到的方式执行步骤 1 和 2，然后您的步骤 3 将更改为以下 3 个步骤)

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

2. 创建 webpack.config.js file 指定您的输入文件和输出文件。您的入口文件将包含您的应用正在使用的任何自定义 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'),
           }
         }
       };
   

3. 最后，添加 <script> HTML 主页面中的标记指向新生成的 Javascript 包:

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

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

干杯