javascript - Webpack 在没有索引的数据表扩展中寻找索引

Question

我想做的是使用数据表。我收到错误:

ERROR in ./index.js
Module not found: Error: Can't resolve 'datatables.net-dt' in path/src

当我尝试对其进行 webpack 时，需要所有数据表。我使用 --display-error-details 运行 webpack 并发现问题是它正在数据表目录中查找某种索引文件。例如

Field 'browser' doesn't contain a valid alias configuration
                      path/node_modules/datatables.net-colreorder-dt/index doesn't exist
                    .js
                      Field 'browser' doesn't contain a valid alias configuration
                      path/node_modules/datatables.net-colreorder-dt/index.js doesn't exist
                    .json
                      Field 'browser' doesn't contain a valid alias configuration
                      path/node_modules/datatables.net-colreorder-dt/index.json doesn't exist

我不明白它为什么要寻找索引。我已经遵循了我可以在 webpack 和 datatables 上找到的所有文档，并且根据 datatables 下载部分，我应该只需要添加包(我已经完成)并添加 require 的部分，它应该可以工作。

我查看了数据表及其扩展的存储库，其中没有任何索引。我已经用各种可能的方式用谷歌搜索了这个问题，但找不到任何答案，所以我希望这里有人可能有一个想法，因为我尝试了许多不同的方法，但这些方法要么不起作用，要么产生更多错误。

这是我的index.js

require('./index.html'); 
var AWS = require('aws-sdk');
require( 'datatables.net-dt' )();
require( 'datatables.net-buttons-dt' )();
require( 'datatables.net-buttons/js/buttons.print.js' )();
require( 'datatables.net-colreorder-dt' )();
require( 'datatables.net-fixedheader-dt' )();
require( 'datatables.net-rowgroup-dt' )();

require 运行后没有代码，所以我没有包含它。

这是我的 package.json

{
  "name": "TestCode",
  "version": "1.0.0",
  "description": "Test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": " ",
  "license": "ISC",
  "dependencies": {
    "aws-sdk": "^2.116.0",
    "datatables.net-buttons-dt": "^1.4.2",
    "datatables.net-colreorder-dt": "^1.4.1",
    "datatables.net-dt": "^1.10.16",
    "datatables.net-fixedheader-dt": "^3.1.3",
    "datatables.net-rowgroup-dt": "^1.0.2",
    "jquery": "^3.2.1",
    "raw-loader": "^0.5.1"
  },
  "devDependencies": {
    "html-webpack-plugin": "^2.30.1",
    "json-loader": "^0.5.7",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  },
}

这是我的 webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  context: path.resolve(__dirname, 'src'),
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'src')
  },
  module: {
    loaders: [
      {
        test: /\.json$/,
        loaders: ['json']
      },
      {
        test: /\.html$/,
        loader: ['raw-loader']
      }
    ]
  },
  resolveLoader: {
    moduleExtensions: ['-loader'] 
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ]
};

Answer 1

首先，您的 require 语句末尾不需要额外的 () 。 require('module'); 没问题。

其次，您有一 strip 有 .js 扩展名的语句。它不应该在那里，因为您需要模块，而不是文件。

最后，解决您问题的解决方案:您的 webpack.config.js 中缺少 resolve 字段。当您保留解析字段时，所有 require() 语句都会在给定的上下文文件夹中查找模块，在您的情况下，该文件夹是源 (src) 文件夹(如果不是，则默认为根文件夹)定义)。

要解决此问题，请将以下内容添加到您的 webpack.config.js 中:

resolve: {
    modules: [
        path.resolve('./node_modules')
    ]
}

或者无论您的 Node 模块在哪里。

webpack 寻找索引的原因是因为它是默认的。它找不到您引用的模块，因此它正在寻找索引文件。您在同一导入中遇到多个错误的原因是它正在寻找多个扩展。

扩展默认为extensions: [".js", ".json"]。这就是您在错误日志中看到 .js 和 .json 的原因。 (顺便说一句，这也是您可以在 require() 语句中保留扩展的原因)

如果您需要更多帮助来理解 webpack，请随时询问，或查看 https://webpack.js.org/configuration/resolve/有关解析选项的文档，了解您可以在解析模块时执行的更多操作。