feat(image-config-webpack-plugin, font-config-webpack-plugin): add co…

…nfiguration to enable ESModules Add a option to make the switch between CommonJS and ES module type imports
merkle-open · Aug 13, 2021 · 98a9647 · 98a9647
1 parent ef105b8
commit 98a9647
Show file tree

Hide file tree

Showing 10 changed files with 7,512 additions and 9 deletions.
diff --git a/packages/font-config-webpack-plugin/README.md b/packages/font-config-webpack-plugin/README.md
@@ -52,3 +52,21 @@ module.exports = {
   ],
 };
 ```
+
+### Enable ES module syntax
+
+By default the `font-config-webpack-plugin` uses the CommonJS modules syntax (`require` statements).
+You can enable the ES module syntax (`import` statements) syntax using: `esModule: true` in the options.
+
+For more information see [file-loader documentation](https://v4.webpack.js.org/loaders/file-loader/#esmodule)
+
+```js
+const FontConfigWebpackPlugin = require('font-config-webpack-plugin');
+module.exports = {
+  plugins: [
+    new FontConfigWebpackPlugin({
+      esModule: true,
+    }),
+  ],
+};
+```
diff --git a/packages/font-config-webpack-plugin/config/development.config.js b/packages/font-config-webpack-plugin/config/development.config.js
@@ -14,7 +14,7 @@ exports = module.exports = (options) => ({
 						loader: require.resolve('file-loader'),
 						options: {
 							name: options.name,
-							esModule: false,
+							esModule: options.esModule,
 						},
 					},
 				],

diff --git a/packages/font-config-webpack-plugin/src/FontConfigWebpackPlugin.js b/packages/font-config-webpack-plugin/src/FontConfigWebpackPlugin.js
@@ -8,14 +8,15 @@
  * Plugin Options
  * @typedef {{
 	 mode?: 'production' | 'development'
-	 name: string,
+	 esModule?: boolean
+	 name: string
 }} FontConfigWebpackPluginOptions */
 
 'use strict';
 /**
  * @type {FontConfigWebpackPluginOptions}
  */
-const defaultOptions = { name: 'static/media/[name].[hash:8].[ext]' };
+const defaultOptions = { name: 'static/media/[name].[hash:8].[ext]', esModule: false };
 
 class FontConfigWebpackPlugin {
 	/**

diff --git a/packages/font-config-webpack-plugin/test/FontConfigWebpackPlugin.test.js b/packages/font-config-webpack-plugin/test/FontConfigWebpackPlugin.test.js
@@ -26,7 +26,7 @@ describe('FontConfigWebpackPlugin standalone', () => {
 	});
 
 	it('should return an instance with the options assigned to it', () => {
-		const options = { name: '[hash]-[name].[ext]' };
+		const options = { name: '[hash]-[name].[ext]', esModule: false };
 		const instance = new FontConfigWebpackPlugin(options);
 
 		expect(instance.options).toEqual(options);

diff --git a/packages/image-config-webpack-plugin/README.md b/packages/image-config-webpack-plugin/README.md
@@ -52,3 +52,21 @@ module.exports = {
   ],
 };
 ```
+
+### Enable ES module syntax
+
+By default the `image-config-webpack-plugin` uses the CommonJS modules syntax (`require` statements).
+You can enable the ES module syntax (`import` statements) syntax using: `esModule: true` in the options.
+
+For more information see [file-loader documentation](https://v4.webpack.js.org/loaders/file-loader/#esmodule)
+
+```js
+const ImageConfigWebpackPlugin = require('image-config-webpack-plugin');
+module.exports = {
+  plugins: [
+    new ImageConfigWebpackPlugin({
+      esModule: true,
+    }),
+  ],
+};
+```
diff --git a/packages/image-config-webpack-plugin/config/development.config.js b/packages/image-config-webpack-plugin/config/development.config.js
@@ -14,7 +14,7 @@ exports = module.exports = (options) => ({
 						loader: require.resolve('file-loader'),
 						options: {
 							name: options.name,
-							esModule: false,
+							esModule: options.esModule,
 						},
 					},
 				],

diff --git a/packages/image-config-webpack-plugin/config/production.config.js b/packages/image-config-webpack-plugin/config/production.config.js
@@ -15,7 +15,7 @@ exports = module.exports = (options) => ({
 						options: {
 							name: options.name,
 							limit: 512,
-							esModule: false,
+							esModule: options.esModule,
 						},
 					},
 				],