CODEWITHSUNDEEP
webpackecmascript-6webpack-2
unional
unional

Reputation: 15589

How to tell webpack to bundle es5 and not es2015 of dependent library?

I have to package that bundles aurelia-logging-color with it.

In aurelia-logging-color package.json, it distributes both es5 and es2015 version:

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

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

My package is transpiled to es5 thus it should bundle the es5 version of aurelia-logging-color. However, the es2015 version is bundled instead:

  [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]

How do I tell webpack to bundle the es5 one instead?

Here is my webpack config:

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}`
      }
    }
  }
}

Upvotes: 0

Views: 654

Answers (1)

Michael Jungo
Michael Jungo

Reputation: 32992

Webpack uses the module field in package.json over the main field whenever it exists. To change that behaviour you can use resolve.mainFields.

If you always want to use the main field it would be:

resolve: {
  mainFields: ['main']
}

Upvotes: 2

Related Questions