如何告诉 webpack 捆绑依赖库的 es5 而不是 es2015？答案

【问题标题】：How to tell webpack to bundle es5 and not es2015 of dependent library?如何告诉 webpack 捆绑依赖库的 es5 而不是 es2015？
【发布时间】：2017-03-15 02:29:35
【问题描述】：

我必须将 aurelia-logging-color 与它打包在一起。

在aurelia-logging-colorpackage.json中，它同时分发了es5和es2015版本：

https://github.com/unional/aurelia-logging-color/blob/master/package.json

{
  "main": "dist/es5/index.js",
  "module": "dist/es2015/index.js"
}

我的包被转译为 es5，因此它应该捆绑 aurelia-logging-color 的 es5 版本。不过es2015版本是捆绑的：

  [0] ./~/aurelia-logging/dist/commonjs/aurelia-logging.js 2.09 kB {0} [built]
  [1] ./dist/es5/global.js 889 bytes {0} [built]
  [2] ./dist/es5/getLoggers.js 209 bytes {0} [built]
  [3] ./dist/es5/extendLogger.js 1.66 kB {0} [built]
  [7] ./dist/es5/configIDValidation.js 406 bytes {0} [built]
  [8] ./dist/es5/getLogger.js 1.5 kB {0} [built]
  [9] ./dist/es5/setLevels.js 376 bytes {0} [built]
  [10] ./~/aurelia-logging-color/dist/es2015/index.js 33 bytes {0} [built]
  [11] ./~/aurelia-logging-memory/dist/es5/index.js 1.87 kB {0} [built]
  [12] ./~/aurelia-logging-color/dist/es2015/Ansi16mBrush.js 1.5 kB {0} [built]
  [13] ./~/aurelia-logging-color/dist/es2015/AnsiBrush.js 1.77 kB {0} [built]
  [14] ./~/aurelia-logging-color/dist/es2015/CSSBrush.js 1.22 kB {0} [built]
  [15] ./~/aurelia-logging-color/dist/es2015/ColorAppender.js 737 bytes {0} [built]
  [16] ./~/aurelia-logging-color/dist/es2015/createBrush.js 796 bytes {0} [built]
  [23] ./dist/es5/index.js 907 bytes {0} [built]

我如何告诉webpack 捆绑 es5 来代替？

这是我的webpack 配置：

const paramCase = require('param-case')
const pascalCase = require('pascal-case')
const path = require('path')

const pjson = require('./package.json')

const filename = paramCase(pjson.name)
const globalVariable = pascalCase(filename)

module.exports = {
  devtool: 'source-map',
  entry: {
    [filename]: './dist/es5/index'
  },
  module: {
    rules: [
      {
        enforce: 'pre',
        loader: "source-map-loader",
        test: /\.js?$/
      }
    ]
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: `${filename}.es5.js`,
    library: globalVariable,
    libraryTarget: 'var',
    devtoolModuleFilenameTemplate: (info) => {
      if (info.identifier.lastIndexOf('.ts') === info.identifier.length - 3) {
        return `webpack:///${pjson.name}/${info.resource.slice(9)}`
      }
      else {
        return `webpack:///${info.resourcePath}`
      }
    }
  }
}

【问题讨论】：

标签： webpack ecmascript-6 webpack-2

【解决方案1】：

Webpack 使用 package.json 中的 module 字段，而不是 main 字段，只要它存在。要更改该行为，您可以使用resolve.mainFields。

如果您总是想使用main 字段，它会是：

resolve: {
  mainFields: ['main']
}

【讨论】：