Merge pull request #2 from electron-vite/dev

release: v0.4.2

Author: caoxiemeihao

README.md

@@ -62,7 +62,7 @@ export interface Configuration {
 
 ## How to work
 
-This plugin is just a builtin scripts of [electron-vite-boilerplate](https://github.com/electron-vite/electron-vite-boilerplate)
+The plugin is just the encapsulation of the built-in scripts of [electron-vite-boilerplate/scripts](https://github.com/electron-vite/electron-vite-boilerplate/tree/main/scripts)
 
 🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-electron",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Integrate Vite and Electron",
   "main": "dist/index.js",
   "repository": {

polyfill-exports.js

@@ -0,0 +1,29 @@
+
+/**
+ * @type {() => import('vite').Plugin}
+ */
+module.exports = function polyfilleExports() {
+  /**
+   * @type {import('vite').ResolvedConfig}
+   */
+  let config;
+
+  return {
+    name: 'vite-plugin-electron:polyfill-exports',
+    configResolved(_config) {
+      config = _config;
+    },
+    transformIndexHtml(html) {
+      const output = config.build.rollupOptions.output;
+      if (!output) return;
+
+      const format = Array.isArray(output) ? output.find(e => e.format) : output.format;
+
+      // https://github.com/electron-vite/electron-vite-vue/issues/103#issuecomment-1097540635
+      if (['cjs', 'commonjs'].includes(format)) {
+        const polyfill = '<script>var exports = module.exports;</script>';
+        return html.replace(/(<\/[\s\r\n]*?head[\s\r\n]*?>)/, polyfill + '\n$1');
+      }
+    },
+  };
+};

renderer/index.js

@@ -7,15 +7,40 @@ const optimizer = require('vite-plugin-optimizer');
  */
 module.exports = function () {
   const name = 'vite-plugin-electron-renderer';
-  const plugin = optimizer(
-    builtinModulesExport(builtinModules.filter(e => !e.startsWith('_'))),
-    { dir: `.${name}` },
-  );
-  plugin.name = name;
+  const builtins = builtinModules.filter(e => !e.startsWith('_'));
+  const plugin = optimizer(builtinModulesExport(builtins), { dir: `.${name}` },);
+
+  plugin.name = `${name}:optimizer`;
+  plugin.apply = 'serve';
 
   return [
+    plugin,
+    {
+      name: `${name}:config-serve`,
+      apply: 'serve',
+      config(config) {
+        // Vite ---- resolve.alias ----
+        if (!config.resolve) config.resolve = {};
+        if (!config.resolve.conditions) config.resolve.conditions = ['node'];
+        if (!config.resolve.alias) config.resolve.alias = [];
+
+        const electronjs = path.join(__dirname, 'modules/electron-renderer.js');
+        if (Array.isArray(config.resolve.alias)) {
+          config.resolve.alias.push({ find: 'electron', replacement: electronjs });
+        } else {
+          config.resolve.alias['electron'] = electronjs;
+        }
+
+        // Vite ---- optimizeDeps.exclude ----
+        if (!config.optimizeDeps) config.optimizeDeps = {};
+        if (!config.optimizeDeps.exclude) config.optimizeDeps.exclude = [];
+
+        config.optimizeDeps.exclude.push('electron');
+      },
+    },
     {
-      name: `${name}:config`,
+      name: `${name}:config-build`,
+      apply: 'build',
       config(config) {
         // make sure that Electron can be loaded into the local file using `loadFile` after packaging
         if (!config.base) config.base = './';
@@ -25,57 +50,47 @@ module.exports = function () {
         // ensure that static resources are loaded normally
         if (!config.build.assetsDir) config.build.assetsDir = '';
 
-        // ----------------------------------------
-        // Rollup: output.format, output.external
-
+        // Rollup ---- init ----
         if (!config.build.rollupOptions) config.build.rollupOptions = {};
         if (!config.build.rollupOptions.output) config.build.rollupOptions.output = {};
 
-        const prodExternals = [...builtinModules.filter(e => !e.startsWith('_')), 'electron'];
-
-        const modifyOutput = output => {
-          if (!output.format) {
-            // the packaged Electron app should use "cjs"
-            output.format = 'cjs';
-          }
-
-          // make builtin modules & electron external when rollup
-          output.external = [...(output.external || []), ...prodExternals];
-        };
-        if (Array.isArray(config.build.rollupOptions.output)) {
-          config.build.rollupOptions.output.forEach(output => {
-            modifyOutput(output);
-          });
+        // Rollup ---- external ----
+        let external = config.build.rollupOptions.external;
+        const electronBuiltins = builtins.map(e => [e, `node:${e}`]).flat().concat('electron');
+        if (
+          Array.isArray(external) ||
+          typeof external === 'string' ||
+          external instanceof RegExp
+        ) {
+          external = electronBuiltins.concat(external);
+        } else if (typeof external === 'function') {
+          const original = external;
+          external = function (source, importer, isResolved) {
+            if (electronBuiltins.includes(source)) {
+              return true;
+            }
+            return original(source, importer, isResolved);
+          };
         } else {
-          modifyOutput(config.build.rollupOptions.output);
+          external = electronBuiltins;
         }
 
-        // ----------------------------------------
-        // Vite: resolve.alias
-
-        if (!config.resolve) config.resolve = {};
-        if (!config.resolve.conditions) config.resolve.conditions = ['node'];
-        if (!config.resolve.alias) config.resolve.alias = [];
-        const electronjs = path.join(__dirname, 'modules/electron-renderer.js');
+        // make builtin modules & electron external when rollup
+        config.build.rollupOptions.external = external;
 
-        if (Array.isArray(config.resolve.alias)) {
-          config.resolve.alias.push({
-            find: 'electron',
-            replacement: electronjs,
-          });
+        // Rollup ---- output.format ----
+        const output = config.build.rollupOptions.output;
+        if (Array.isArray(output)) {
+          for (const o of output) {
+            if (o.format === undefined) o.format = 'cjs';
+          }
         } else {
-          config.resolve.alias['electron'] = electronjs;
+          // external modules such as `electron`, `fs`
+          // they can only be loaded normally under CommonJs
+          if (output.format === undefined) output.format = 'cjs';
         }
-
-        // ----------------------------------------
-        // Vite: optimizeDeps.exclude
-
-        if (!config.optimizeDeps) config.optimizeDeps = {};
-        if (!config.optimizeDeps.exclude) config.optimizeDeps.exclude = [];
-        config.optimizeDeps.exclude.push('electron');
       },
     },
-    plugin,
   ];
 };