Webpack - 子模块未正确解析答案

【问题标题】：Webpack - sub modules not resolved correctlyWebpack - 子模块未正确解析
【发布时间】：2018-02-16 10:45:44
【问题描述】：

我有一个项目，它使用当前版本的 lodash library 4.17.5。

这个项目有它的依赖another module，它基本上是一个精简版的codemirror。
codemirrormodule 使用 JSHINT 作为它的依赖项，而 JSHINT 依赖于 lodash version 3.x。

现在，由于我的项目中有一个 lodash 4.x 版本，每当在 JSHINT 中调用 require 时，它需要 4.x 版本而不是 3.x 版本，并抱怨缺少不再支持的方法通过 lodash 4.x.

这是我的 npm ls 命令输出的一部分。在我的 node_modules/lodash 我有一个 lodash 4.x 版本，而在我的 node_modules/jshint/node_modules/lodah 是版本 3.x

我使用的是 webpack 3.11.0

我的 webpack 配置：

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var webpack = require('webpack')
var projectRoot = path.resolve(__dirname, '../')

module.exports = {
 entry: {
  app: './src/main.js'
 },
 output: {
  path: config.build.assetsRoot,
  publicPath: process.env.NODE_ENV === 'production' ? "." + 
  config.build.assetsPublicPath : config.dev.assetsPublicPath,
  filename: '[name].js'
},
 resolve: {
extensions: ['.js', '.vue'],
alias: {
  'src': path.resolve(__dirname, '../src'),
  'assets': path.resolve(__dirname, '../src/assets'),
  'components': path.resolve(__dirname, '../src/components'),
  'scss': path.resolve(__dirname, '../src/scss'),
  'services': path.resolve(__dirname, '../src/services'),
  'ui': path.resolve(__dirname, '../src/components/UI'),
  'utility': path.resolve(__dirname, '../src/util.js'),
   // This is a hack which solves the issue, but still a hack.
  'lodash4': path.resolve(__dirname, '../node_modules/lodash'),
  'lodash': path.resolve(__dirname, '../node_modules/jshint/node_modules/lodash'),
},
modules: [
  path.join(__dirname, '../node_modules')
]
},
resolveLoader: {
modules: [
  path.join(__dirname, '../node_modules')
],
},
module: {
 rules: [
  {
    test: /\.vue$/,
    enforce: 'pre',
    loader: 'eslint-loader',
    include: projectRoot,
    exclude: /node_modules/
  },
  {
    test: /\.js$/,
    enforce: 'pre',
    loader: 'eslint-loader',
    include: projectRoot,
    exclude: /node_modules/
  },
  {
    test: /\.vue$/,
    loader: 'vue-loader'
  },
  {
    test: /\.(js|js.flow)$/,
    loader: 'babel-loader',
    include: projectRoot,
    exclude: /node_modules/,
  },
  {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  },
  {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
  }
]
},
plugins: [
 new webpack.LoaderOptionsPlugin({
  options: {
    eslint: {
      formatter: require('eslint-friendly-formatter')
    },
    vue: {
      loaders: utils.cssLoaders(),
      postcss: [
        require('autoprefixer')({
          browsers: ['last 2 versions']
        })
      ]
    }
  }
})
]
}

有什么方法可以指定在主项目中使用哪个库版本，以及在具有较低版本的子模块中使用哪个库版本作为它的依赖项？它不应该默认发生吗？

我发现可以通过为较新的 lodash 版本使用别名来完成，但这听起来不是一个合适的解决方案。

【问题讨论】：

似乎有些不对劲。 JSHint 通常是一个 devDependency，所以如果你依赖一个依赖于 JSHint 的库......它不应该影响你的构建。您如何需要 codemirrormodule？也许你需要 dist 版本什么的

标签： javascript webpack lodash jshint

【解决方案1】：

我在 webpack github 页面 #6505 上获得了帮助。

基本上我错误地配置了 node_modules 解析器：
这会强制所有模块从根 node_modules 仅解析。

modules: [
  path.join(__dirname, '../node_modules')
]

正确：
这是默认的分层 node_modules 分辨率。你可以omit this。

modules: [
  'node_modules'
]

【讨论】：