feat(project): implement the new manual Babel polyfill

package.json

@@ -13,6 +13,9 @@
       "fs-extra": "^8.1.0",
       "extend": "^3.0.2",
 
+      "core-js": "^3.1.4",
+      "regenerator-runtime": "^0.13.3",
+
       "webpack": "^4.36.1",
       "webpack-cli": "^3.3.6",
       "webpack-dev-server": "^3.7.2",

polyfill.js

@@ -0,0 +1,3 @@
+/* eslint-disable */
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';

src/index.js

@@ -38,6 +38,7 @@ const loadPlugin = (app) => {
       'express',
       'jimpex',
     ],
+    babelPolyfill: 'polyfill.js',
   }));
   // Register the main services of the build engine.
   app.register(webpackConfiguration);

src/services/building/configuration.js

@@ -16,14 +16,17 @@ class WebpackConfiguration {
    *                                                           configuration for the target.
    * @param {WebpackConfigurations}      webpackConfigurations A dictionary of configurations
    *                                                           for target type and build type.
+   * @param {WebpackPluginInfo}          webpackPluginInfo     To get the path to the Babel
+   *                                                           polyfill.
    */
   constructor(
     buildVersion,
     pathUtils,
     targets,
     targetsFileRules,
     targetConfiguration,
-    webpackConfigurations
+    webpackConfigurations,
+    webpackPluginInfo
   ) {
     /**
      * A local reference for the `buildVersion` service.
@@ -55,6 +58,11 @@ class WebpackConfiguration {
      * @type {WebpackConfigurations}
      */
     this.webpackConfigurations = webpackConfigurations;
+    /**
+     * A local reference for the plugin information.
+     * @type {WebpackPluginInfo}
+     */
+    this.webpackPluginInfo = webpackPluginInfo;
   }
   /**
    * This method generates a complete webpack configuration for a target.
@@ -75,7 +83,7 @@ class WebpackConfiguration {
     const entryFile = path.join(target.paths.source, target.entry[buildType]);
     const entries = [entryFile];
     if (target.babel.polyfill) {
-      entries.unshift('@babel/polyfill');
+      entries.unshift(`${this.webpackPluginInfo.name}/${this.webpackPluginInfo.babelPolyfill}`);
     }
 
     const copy = [];
@@ -209,7 +217,8 @@ const webpackConfiguration = provider((app) => {
       app.get('targets'),
       app.get('targetsFileRules'),
       app.get('targetConfiguration'),
-      webpackConfigurations
+      webpackConfigurations,
+      app.get('webpackPluginInfo')
     );
   });
 });

src/services/configurations/browserDevelopmentConfiguration.js

@@ -214,8 +214,9 @@ class WebpackBrowserDevelopmentConfiguration extends ConfigurationFile {
       const [entryName] = Object.keys(entry);
       // Get the list of entries for the target.
       const entries = config.entry[entryName];
-      // Check if the `babel-polyfill` is present, since it always needs to be first.
-      const polyfillIndex = entries.indexOf('@babel/polyfill');
+      // Check if the Babel polyfill is present, since it always needs to be first.
+      const polyfillIndex = entries
+      .indexOf(`${this.webpackPluginInfo.name}/${this.webpackPluginInfo.babelPolyfill}`);
       // If the `babel-polyfill` is present...
       if (polyfillIndex > -1) {
         // ...push all the _"hot entries"_ after it.

src/typedef.js

@@ -179,6 +179,8 @@
  * @property {Array}  external      The list of subpaths the plugin exposes and that should be
  *                                  handled as external dependencies, in order to avoid bundling
  *                                  them.
+ * @property {string} babelPolyfill The name of the file that imports the required modules to
+ *                                  act as the old Babel polyfill.
  */
 
 /**

tests/index.test.js

@@ -31,6 +31,7 @@ describe('plugin:projextWebpack', () => {
         'express',
         'jimpex',
       ],
+      babelPolyfill: 'polyfill.js',
     });
     expect(app.set).toHaveBeenCalledTimes(1);
     expect(app.set).toHaveBeenCalledWith('webpackPluginInfo', expect.any(Function));

tests/services/building/configuration.test.js

@@ -25,6 +25,7 @@ describe('services/building:configuration', () => {
     const targetsFileRules = 'targetsFileRules';
     const targetConfiguration = 'targetConfiguration';
     const webpackConfigurations = 'webpackConfigurations';
+    const webpackPluginInfo = 'webpackPluginInfo';
     let sut = null;
     // When
     sut = new WebpackConfiguration(
@@ -33,7 +34,8 @@ describe('services/building:configuration', () => {
       targets,
       targetsFileRules,
       targetConfiguration,
-      webpackConfigurations
+      webpackConfigurations,
+      webpackPluginInfo
     );
     // Then
     expect(sut).toBeInstanceOf(WebpackConfiguration);
@@ -43,6 +45,7 @@ describe('services/building:configuration', () => {
     expect(sut.targetsFileRules).toBe(targetsFileRules);
     expect(sut.targetConfiguration).toBe(targetConfiguration);
     expect(sut.webpackConfigurations).toBe(webpackConfigurations);
+    expect(sut.webpackPluginInfo).toBe(webpackPluginInfo);
   });
 
   it('should throw an error when trying to build a target with an invalid type', () => {
@@ -56,6 +59,7 @@ describe('services/building:configuration', () => {
       type: 'random-type',
     };
     const webpackConfigurations = {};
+    const webpackPluginInfo = 'webpackPluginInfo';
     let sut = null;
     // When
     sut = new WebpackConfiguration(
@@ -64,7 +68,8 @@ describe('services/building:configuration', () => {
       targets,
       targetsFileRules,
       targetConfiguration,
-      webpackConfigurations
+      webpackConfigurations,
+      webpackPluginInfo
     );
     // Then
     expect(() => sut.getConfig(target))
@@ -85,6 +90,7 @@ describe('services/building:configuration', () => {
     const webpackConfigurations = {
       node: {},
     };
+    const webpackPluginInfo = 'webpackPluginInfo';
     let sut = null;
     // When
     sut = new WebpackConfiguration(
@@ -93,7 +99,8 @@ describe('services/building:configuration', () => {
       targets,
       targetsFileRules,
       targetConfiguration,
-      webpackConfigurations
+      webpackConfigurations,
+      webpackPluginInfo
     );
     // Then
     expect(() => sut.getConfig(target, buildType))
@@ -155,6 +162,7 @@ describe('services/building:configuration', () => {
         [buildType]: {},
       },
     };
+    const webpackPluginInfo = 'webpackPluginInfo';
     let sut = null;
     let result = null;
     // When
@@ -164,7 +172,8 @@ describe('services/building:configuration', () => {
       targets,
       targetsFileRules,
       targetConfiguration,
-      webpackConfigurations
+      webpackConfigurations,
+      webpackPluginInfo
     );
     result = sut.getConfig(target, buildType);
     // Then
@@ -262,6 +271,7 @@ describe('services/building:configuration', () => {
         [buildType]: {},
       },
     };
+    const webpackPluginInfo = 'webpackPluginInfo';
     let sut = null;
     let result = null;
     // When
@@ -271,7 +281,8 @@ describe('services/building:configuration', () => {
       targets,
       targetsFileRules,
       targetConfiguration,
-      webpackConfigurations
+      webpackConfigurations,
+      webpackPluginInfo
     );
     result = sut.getConfig(target, buildType);
     // Then
@@ -373,6 +384,7 @@ describe('services/building:configuration', () => {
         [buildType]: {},
       },
     };
+    const webpackPluginInfo = 'webpackPluginInfo';
     let sut = null;
     let result = null;
     // When
@@ -382,7 +394,8 @@ describe('services/building:configuration', () => {
       targets,
       targetsFileRules,
       targetConfiguration,
-      webpackConfigurations
+      webpackConfigurations,
+      webpackPluginInfo
     );
     result = sut.getConfig(target, buildType);
     // Then
@@ -481,6 +494,7 @@ describe('services/building:configuration', () => {
         [buildType]: {},
       },
     };
+    const webpackPluginInfo = 'webpackPluginInfo';
     let sut = null;
     let result = null;
     // When
@@ -490,7 +504,8 @@ describe('services/building:configuration', () => {
       targets,
       targetsFileRules,
       targetConfiguration,
-      webpackConfigurations
+      webpackConfigurations,
+      webpackPluginInfo
     );
     result = sut.getConfig(target, buildType);
     // Then
@@ -589,6 +604,10 @@ describe('services/building:configuration', () => {
         [buildType]: {},
       },
     };
+    const webpackPluginInfo = {
+      name: 'plugin',
+      babelPolyfill: 'da-polyfill.js',
+    };
     let sut = null;
     let result = null;
     // When
@@ -598,7 +617,8 @@ describe('services/building:configuration', () => {
       targets,
       targetsFileRules,
       targetConfiguration,
-      webpackConfigurations
+      webpackConfigurations,
+      webpackPluginInfo
     );
     result = sut.getConfig(target, buildType);
     // Then
@@ -620,7 +640,7 @@ describe('services/building:configuration', () => {
       buildType,
       entry: {
         [target.name]: [
-          '@babel/polyfill',
+          `${webpackPluginInfo.name}/${webpackPluginInfo.babelPolyfill}`,
           path.join(target.paths.source, target.entry[buildType]),
         ],
       },
@@ -694,6 +714,7 @@ describe('services/building:configuration', () => {
         [buildType]: {},
       },
     };
+    const webpackPluginInfo = 'webpackPluginInfo';
     const expectedConfig = {
       output: {
         path: 'some-output-path',
@@ -709,7 +730,8 @@ describe('services/building:configuration', () => {
       targets,
       targetsFileRules,
       targetConfiguration,
-      webpackConfigurations
+      webpackConfigurations,
+      webpackPluginInfo
     );
     result = sut.getConfig(target, buildType);
     // Then
@@ -804,6 +826,7 @@ describe('services/building:configuration', () => {
         [buildType]: {},
       },
     };
+    const webpackPluginInfo = 'webpackPluginInfo';
     const expectedConfig = {
       output: {
         path: 'some-output-path',
@@ -819,7 +842,8 @@ describe('services/building:configuration', () => {
       targets,
       targetsFileRules,
       targetConfiguration,
-      webpackConfigurations
+      webpackConfigurations,
+      webpackPluginInfo
     );
     result = sut.getConfig(target, buildType);
     // Then
@@ -889,5 +913,6 @@ describe('services/building:configuration', () => {
         production: 'webpackBrowserProductionConfiguration',
       },
     });
+    expect(sut.webpackPluginInfo).toBe('webpackPluginInfo');
   });
 });