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__
– axm__, Commented Oct 17, 2018 at 16:35
Any of options for an "exclude" does not help. In result "BetakillerWampFacade" it still class. Not a function. — LV426
– LV426, Commented Oct 17, 2018 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__
– axm__, Commented Oct 17, 2018 at 16:38
In package.json of module @betakiller/wamp-wrapper: "main": "./src/BetakillerWampFacade.js", — LV426
– LV426, Commented Oct 17, 2018 at 16:41

axm__ · Accepted Answer · 2018-10-17 16:22:14Z

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.

Could you update your question with what you tried exactly. I just checked it and it works?

J.S.R - Silicornio · Accepted Answer · 2020-09-18 17:19:45Z

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.

Collectives™ on Stack Overflow

Disable directory "node_modules" ignoring in Babel

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related