fix(js-config-webpack-plugin): find, register and invoke correct babel configs

Author: Simon Mollweide

packages/js-config-webpack-plugin/package.json

@@ -33,6 +33,11 @@
       "name": "Jan Nicklas",
       "email": "j.nicklas@me.com",
       "url": "https://github.com/jantimon"
+    },
+    {
+      "name": "Simon Mollweide",
+      "email": "simon.mollweide@gmail.com",
+      "url": "https://github.com/smollweide"
     }
   ],
   "engines": {

packages/js-config-webpack-plugin/src/JsConfigWebpackPlugin.js

@@ -10,8 +10,9 @@
 
 'use strict';
 const path = require('path');
-const findRelativeConfig = require('@babel/core/lib/config/files/configuration').findRelativeConfig;
 const findPackageData = require('@babel/core/lib/config/files/package').findPackageData;
+const findRelativeConfig = require('@babel/core/lib/config/files/configuration').findRelativeConfig;
+const findRootConfig = require('@babel/core/lib/config/files/configuration').findRootConfig;
 
 class JsConfigWebpackPlugin {
 	/**
@@ -30,11 +31,20 @@ class JsConfigWebpackPlugin {
 	resolveBabelConfigFilePath(contextPath, environmentName) {
 		// From https://github.com/babel/babel/blob/52a569056c6008c453bf26219461655c7d0322c4/packages/babel-core/src/config/files/package.js#L15
 		const packageData = findPackageData(contextPath);
+		// needed because babels `findRelativeConfig` search just in parent directories
+		packageData.directories.push(packageData.filepath);
 		// From https://github.com/babel/babel/blob/52a569056c6008c453bf26219461655c7d0322c4/packages/babel-core/src/config/files/configuration.js#L26
-		const resolvedFilePath = findRelativeConfig(packageData, environmentName);
+		const resolvedRelativeConfig = findRelativeConfig(packageData, environmentName);
+		const resolvedRootConfig = findRootConfig(packageData.filepath);
+
+		// babel.config.js
+		if (resolvedRootConfig && resolvedRootConfig.filepath) {
+			return resolvedRootConfig.filepath;
+		}
 
-		if (resolvedFilePath.config) {
-			return resolvedFilePath.config.filepath;
+		// .babelrc.js and .babelrc
+		if (resolvedRelativeConfig && resolvedRelativeConfig.config) {
+			return resolvedRelativeConfig.config.filepath;
 		}
 
 		console.warn(

packages/js-config-webpack-plugin/test/JsConfigWebpackPlugin.test.js

@@ -114,7 +114,7 @@ describe('JsConfigWebpackPlugin inside context', () => {
 	it('should have the correct babelConfigFile option in development mode', (done) => {
 		const webpackContext = path.join(__dirname, 'fixtures/babel');
 		const babelConfigFileContext = path.join(__dirname, '../config');
-		const babelConfigFileName = '.babelrc.base.json';
+		const babelConfigFileName = '.babelrc';
 
 		const instance = webpack({
 			mode: 'development',
@@ -125,14 +125,14 @@ describe('JsConfigWebpackPlugin inside context', () => {
 		const ruleToTest = instance.options.module.rules[0];
 		const ruleOptions = ruleToTest.use[1].options;
 
-		expect(ruleOptions.extends).toEqual(path.resolve(babelConfigFileContext, babelConfigFileName));
+		expect(ruleOptions.extends).toEqual(path.resolve(webpackContext, babelConfigFileName));
 		done();
 	});
 
 	it('should have the correct babelConfigFile option in production mode', (done) => {
 		const webpackContext = path.join(__dirname, 'fixtures/babel');
 		const babelConfigFileContext = path.join(__dirname, '../config');
-		const babelConfigFileName = '.babelrc.base.json';
+		const babelConfigFileName = '.babelrc';
 
 		const instance = webpack({
 			mode: 'production',
@@ -143,10 +143,46 @@ describe('JsConfigWebpackPlugin inside context', () => {
 		const ruleToTest = instance.options.module.rules[0];
 		const ruleOptions = ruleToTest.use[1].options;
 
+		expect(ruleOptions.extends).toEqual(path.resolve(webpackContext, babelConfigFileName));
+		done();
+	});
+
+	it('should load the babel fallback config', (done) => {
+		const webpackContext = path.join(__dirname, 'fixtures/babel-no-babel');
+		const babelConfigFileContext = path.join(__dirname, '../config');
+		const babelConfigFileName = '.babelrc.base.json';
+
+		const instance = webpack({
+			mode: 'development',
+			context: webpackContext,
+			plugins: [new JsConfigWebpackPlugin()],
+		});
+
+		const ruleToTest = instance.options.module.rules[0];
+		const ruleOptions = ruleToTest.use[1].options;
+
 		expect(ruleOptions.extends).toEqual(path.resolve(babelConfigFileContext, babelConfigFileName));
 		done();
 	});
 
+	it('should load the root babel config', (done) => {
+		const webpackContext = path.join(__dirname, 'fixtures/babel-root-babel');
+		const babelConfigFileContext = path.join(__dirname, '../config');
+		const babelConfigFileName = 'babel.config.js';
+
+		const instance = webpack({
+			mode: 'development',
+			context: webpackContext,
+			plugins: [new JsConfigWebpackPlugin()],
+		});
+
+		const ruleToTest = instance.options.module.rules[0];
+		const ruleOptions = ruleToTest.use[1].options;
+
+		expect(ruleOptions.extends).toEqual(path.resolve(webpackContext, babelConfigFileName));
+		done();
+	});
+
 	it('should allow to pass the babelConfigFile option in development mode', (done) => {
 		const webpackContext = path.join(__dirname, 'fixtures/babel');
 		const babelConfigFilePath = path.join(webpackContext, '.babelrc');
@@ -205,7 +241,7 @@ describe('JsConfigWebpackPlugin inside context', () => {
 	it('the correct base .babelrc file should be registered and invoked', (done) => {
 		const webpackContext = path.join(__dirname, 'fixtures/babel');
 		const babelConfigFileContext = path.join(__dirname, '../config');
-		const babelConfigFileName = '.babelrc.base.json';
+		const babelConfigFileName = '.babelrc';
 
 		const compiler = webpack({
 			mode: 'production',
@@ -218,7 +254,7 @@ describe('JsConfigWebpackPlugin inside context', () => {
 
 		// should not fail because base-file of babelrc has no errors
 		compiler.run((_, stats) => {
-			expect(ruleOptions.extends).toBe(path.resolve(babelConfigFileContext, babelConfigFileName));
+			expect(ruleOptions.extends).toBe(path.resolve(webpackContext, babelConfigFileName));
 			expect(stats.compilation.errors).toEqual([]);
 			done();
 		});

packages/js-config-webpack-plugin/test/fixtures/babel-no-babel/package.json

@@ -0,0 +1,7 @@
+{
+  "description": "package-file-for-babel",
+  "version": "0.1.0",
+  "author": "Namics AG - Technology & Application",
+  "license": "MIT",
+  "main": "./src/index.js"
+}

packages/js-config-webpack-plugin/test/fixtures/babel-no-babel/src/index.js

@@ -0,0 +1,33 @@
+// classes
+class Plugin {
+	constructor(name) {
+		this.name = name;
+	}
+
+	run() {
+		console.log(`${name} is running!`);
+	}
+}
+
+// arrow functions
+const main = () => {
+	const pluginOne = new Plugin('One');
+	pluginOne.run();
+};
+
+main();
+
+//map with pow
+[1, 2, 3].map((number) => number ** 2);
+
+// shorthand Object method
+var obj = {
+	shorthand,
+	test() {
+		return 'test';
+	},
+};
+
+// spread
+const arr = [1, 2, 3, 4, 5];
+const spreadArr = [...arr];

packages/js-config-webpack-plugin/test/fixtures/babel-root-babel/babel.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+	presets: ['@babel/env'],
+	ignore: ['foo.js', 'bar/**/*.js'],
+};

packages/js-config-webpack-plugin/test/fixtures/babel-root-babel/package.json

@@ -0,0 +1,7 @@
+{
+  "description": "package-file-for-babel",
+  "version": "0.1.0",
+  "author": "Namics AG - Technology & Application",
+  "license": "MIT",
+  "main": "./src/index.js"
+}

packages/js-config-webpack-plugin/test/fixtures/babel-root-babel/src/index.js

@@ -0,0 +1,33 @@
+// classes
+class Plugin {
+	constructor(name) {
+		this.name = name;
+	}
+
+	run() {
+		console.log(`${name} is running!`);
+	}
+}
+
+// arrow functions
+const main = () => {
+	const pluginOne = new Plugin('One');
+	pluginOne.run();
+};
+
+main();
+
+//map with pow
+[1, 2, 3].map((number) => number ** 2);
+
+// shorthand Object method
+var obj = {
+	shorthand,
+	test() {
+		return 'test';
+	},
+};
+
+// spread
+const arr = [1, 2, 3, 4, 5];
+const spreadArr = [...arr];