Webpack - 同一个库

时间:2018-02-16 10:45:45

标签: javascript webpack lodash jshint

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

这个项目依赖于另一个模块,它基本上是codemirror的lite版本。 https://www.npmjs.com/package/vue2-codemirror-lite-js

codemirrormodule使用JSHINT作为依赖项,JSHINT依赖于lodash版本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

enter image description here

我使用的是webpack 3.11.0

我的网络包配置:

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版本的别名来完成,但这听起来不是一个合适的解决方案。

enter image description here

1 个答案:

答案 0 :(得分:3)

我在webpack github页面上得到了帮助。

https://github.com/webpack/webpack/issues/6505

基本上我错误地配置了node_modules解析器:

func update(forCell: TextFieldCell) {

    let indexPath = tableView.indexPath(for: forCell)

    if indexPath?.row == attractions.count - 1 {

        //Set background image for remove(minus) to addDeleteButton
        forCell.addDeleteButton.setBackgroundImage(UIImage(named:"minus"), for: .normal)

        attractions.append(attractions[0])
        tableView.beginUpdates()
        tableView.insertRows(at: [[0,attractions.count-1]], with: .automatic)
        tableView.endUpdates()
    } else {
        attractions.remove(at: (indexPath?.row)!)
        tableView.beginUpdates()
        tableView.deleteRows(at: [indexPath!], with: .automatic)
        tableView.endUpdates()
    }
}

这会强制所有模块从根node_modules解析。

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