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
              }
            ]
          ]
        },
      }
    ]
  }
};

Ok, what happens if you ONLY put `exclude: /node_modules\/(?!@betakiller).*/` ? because the `.*` means any character zero times or more times, you don't need the rest — axm__, Oct 17 '18 at 16:35
Any of options for an "exclude" does not help. In result "BetakillerWampFacade" it still class. Not a function. — LV426, Oct 17 '18 at 16:37
also: can you check in the `package.json` of `@betakiller/wamp-wrapper` , if the file mentioned in the `main` property ends with `.js` ? Because that rule you have ONLY runs on `.js` files — axm__, Oct 17 '18 at 16:38
In `package.json` of module `@betakiller/wamp-wrapper`: `"main": "./src/BetakillerWampFacade.js",` — LV426, Oct 17 '18 at 16:41

axm__ · Answer 1 · 2018-10-17T16:22:14.150

3

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.

edited Oct 17 '18 at 16:22

answered Oct 17 '18 at 16:14

axm__

2,463
1
18
34

Could you update your question with what you tried exactly. I just checked it and it works? – axm__ Oct 17 '18 at 16:20

score 0 · Answer 2 · answered Sep 18 '20 at 17:19

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.

Disable directory "node_modules" ignoring in Babel

2 Answers2