Disable directory "node_modules" ignoring in Babel

Question

I use webpack4 + babel7. In my JS script I need to import NPM module. This module uses ES6 classes and modules. And after building bundle this class not transpiling to standart functions. How to make the NPM module I need was completely transpiled?

package.json

{
  "scripts": {
    "dev": "webpack --config webpack.config.js --mode=development",
    "prod": "webpack --config webpack.config.js --mode=production"
  },
  "dependencies": {
    "@betakiller/wamp-wrapper": "^0.1.0",
    "babel-polyfill": "^6.26.0",
    "chalk": "^2.4.1",
    "whatwg-fetch": "^3.0.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.1.2",
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "babel-loader": "^8.0.4",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2"
  }
}

webpack.config.js

const path     = require('path');
const paths    = {
  'src':  __dirname,
  'dist': path.resolve(__dirname, 'dist')
};
module.exports = {
  entry:  {
    app: paths.src + '/app.js'
  },
  output: {
    filename: '[name].js',
    path:     paths.dist
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use:  'babel-loader'
      }
    ]
  }
};

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "forceAllTransforms":true
      }
    ]
  ]
}

app.js

console.log('app.js');

import BetakillerWampFacade from '@betakiller/wamp-wrapper';
import ImportedClass from './ImportedClass';

const WampFacade = new BetakillerWampFacade();
console.log('WampFacade', WampFacade);

const Imported = new ImportedClass();
console.log('Imported', Imported);

ImportedClass.js

'use strict';

export default class ImportedClass {
  action(){
    console.log('ImportedClass');
  }
}

NPM module result

Test imported class result

Failed test in webpack.config.js

module: {
  rules: [
    {
      test:    /\.js$/,
      use:  'babel-loader',
      exclude: /node_modules\/(?!@betakiller\/wamp-wrappe).*/
    }
  ]
}

My solution

• move babel config to the webpack config
• remove .babelrc

new webpack.config.js

const path     = require('path');
const paths    = {
  'src':  __dirname,
  'dist': path.resolve(__dirname, 'dist')
};
module.exports = {
  entry:  {
    app: paths.src + '/app.js'
  },
  output: {
    filename: '[name].js',
    path:     paths.dist
  },
  module: {
    rules: [
      {
        test:    /\.js$/,
        loader:  'babel-loader',
        options: {
          ignore:  [],
          presets: [
            [
              "@babel/preset-env",
              {
                forceAllTransforms: true
              }
            ]
          ]
        },
      }
    ]
  }
};

Answer 1

Try

{
    test: /\.js$/,
    use:  'babel-loader'
    exclude: /node_modules\/(?!(specific_package_name1|specific_package_name2)).*/
}

Where you replace specific_package_name1 etc with the names of the packages you do NOT want to be excluded in node_modules when babel transpiles. See this regex to see how it matches with package names.

Answer 2

The @axm__ did not work to me but it seems to be right. This is the way worked for me with Webpack 4.43.+ and Babel 7.10.+:

{
    test: [/\.js$/],
    loader: 'babel-loader',
    exclude: [
      {
        test: [
          path.resolve(__dirname, './node_modules'),
        ],
        exclude: [
          path.resolve(__dirname, './node_modules/MODULE_TO_INCLUDE'),
          path.resolve(__dirname, './node_modules/ANOTHER_MODULE_TO_INCLUDE'),
        ]
      }
    ]
  }

Checking the documentation I saw the exclude attribute can work as another rule and I tried and it worked right. Maybe it is useful for someone.

NOTE: I uses "path.resolve" but it shouldn't be necessary, I use it because I have the webpack in another folder.