Wondering what’s next for npm?Check out our public roadmap! »

webpack-plugin-modern-npm

0.1.0 • Public • Published

webpack-plugin-modern-npm

Automatically transpile modern packages in node_modules.

Available in 3 fun flavours: plugin, loader and loader factory.

Plugin

Add the plugin to your webpack config, and it should handle everything for you.

You can customize the syntax target in your Babel configuration.

const ModernNpmPlugin = require('webpack-plugin-modern-npm');

module.exports = {
  plugins: [
    new ModernNpmPlugin()
  ]
};

Loader

The loader works just like the plugin and accepts the same options, it's just defined inline.

You can customize the syntax target in your Babel configuration.

const modernNpmLoader = require('webpack-plugin-modern-npm/loader');

module.exports = {
  module: {
    rules: [
      // auto-transpile modern stuff found in node_modules:
      'webpack-plugin-modern-npm/loader',
      
      // keep your current babel-loader for your own code:
      {
        loader: 'babel-loader',
        exclude: /node_modules/,
        test: /\.m?jsx?$/i
      }
    ]
  }
};

Loader Factory (custom)

Note: In general, direct usage of this factory should be unnecessary and is not recommended.

See anyway
const autoBabelLoader = require('webpack-plugin-modern-npm/auto-babel-loader');

module.exports = {
  module: {
    rules: [
      // auto-transpile modern stuff found in node_modules:
      autoBabelLoader({
        env: 'nodemodules' // if you want to custimize
      }),
      
      // keep your current babel-loader for your own code:
      {
        loader: 'babel-loader',
        exclude: /node_modules/,
        test: /\.m?jsx?$/i
      }
    ]
  }
};

Customizing the Syntax Target

The syntax target (which version of JavaScript, or which browsers to support) for @babel/preset-env within node_modules can be customized using "env" overrides in your existing Babel configuration file (.babelrc or babel.config.js):

{
  "env": {
    "npm": {
      // these are the defaults:
      "presets": [
        ["@babel/preset-env", {
          "loose": true,
          "bugfixes": true,
          "useBuiltIns": false
        }]
      ]
    }
  }
}

The "env" name defaults to "npm" and can be changed by passing the {env:"foo"} option to either the plugin or loader.

Keywords

none

Install

npm i webpack-plugin-modern-npm

DownloadsWeekly Downloads

73

Version

0.1.0

License

Apache-2.0

Unpacked Size

5.26 kB

Total Files

5

Last publish

Collaborators

  • avatar