@easyv/react-component-builder 0.24.0 → 0.25.1

package/config/webpack.config.build.js

@@ -10,30 +10,46 @@ if (fs.existsSync(webpackConfigExtend)) {
   webpackConfigExtendFn = require(webpackConfigExtend);
 }
 
-process.env.NODE_ENV = 'production';
-
 module.exports = (
   { filename, module_name, version },
-  { uniqueId, removeConsole },
+  { uniqueId, removeConsole, format = 'amd' },
 ) => {
+  // launcher/start.js loads the dev config, which sets NODE_ENV=development.
+  // babel-preset-react-app reads BABEL_ENV first, so pin both before compile.
+  process.env.BABEL_ENV = 'production';
+  process.env.NODE_ENV = 'production';
+
   const entry = path.resolve(appComponents, filename, 'index');
+  const isEsm = format === 'esm';
   const cf = {
     ...commonConfig({ isProduction: true, uniqueId, entrys: [entry] }),
-    mode: process.env.NODE_ENV,
+    mode: 'production',
     entry,
     output: {
       path: appBuild,
       filename: `${module_name}.${version}.js`,
-      library: { name: `${module_name}@${version}`, type: 'amd' },
+      pathinfo: false,
+      library: isEsm
+        ? { type: 'module' }
+        : { name: `${module_name}@${version}`, type: 'amd' },
     },
-    externals: [
-      'react',
-      'react-dom',
-      'three',
-      'lodash',
-      'd3',
-      '@material-ui/styles',
-    ],
+    externals: isEsm
+      ? {
+          react: 'react',
+          'react-dom': 'react-dom',
+          three: 'three',
+          lodash: 'lodash',
+          d3: 'd3',
+          '@material-ui/styles': '@material-ui/styles',
+        }
+      : [
+          'react',
+          'react-dom',
+          'three',
+          'lodash',
+          'd3',
+          '@material-ui/styles',
+        ],
     devtool: false,
     plugins: [
       new webpack.ProvidePlugin({
@@ -42,27 +58,36 @@ module.exports = (
         ReactDom: 'react-dom',
       }),
     ],
-  };
-
-  if (webpackConfigExtendFn) {
-    return webpackConfigExtendFn(cf, {
-      production: true,
-    });
-  }
-
-  if (removeConsole) {
-    cf['optimization'] = {
+    optimization: {
+      minimize: true,
+      concatenateModules: true,
       minimizer: [
         new TerserWebpackPlugin({
           parallel: true,
+          extractComments: false,
           terserOptions: {
             compress: {
-              drop_console: true,
+              drop_console: !!removeConsole,
+              passes: 2,
+            },
+            format: {
+              comments: false,
             },
           },
         }),
       ],
-    };
+    },
+  };
+
+  if (isEsm) {
+    cf.experiments = { outputModule: true };
+    cf.externalsType = 'module';
+  }
+
+  if (webpackConfigExtendFn) {
+    return webpackConfigExtendFn(cf, {
+      production: true,
+    });
   }
 
   return cf;

package/config/webpack.config.common.js

@@ -1,5 +1,26 @@
 const { appSrc, ownLoaders, cliNodeModules } = require("../config/paths");
 
+function styleUse(isProduction, cssLoaderOptions, extraLoaders) {
+  const cssOptions = { esModule: true };
+  if (isProduction) cssOptions.sourceMap = false;
+  if (cssLoaderOptions) Object.assign(cssOptions, cssLoaderOptions);
+
+  const loaders = [
+    {
+      loader: isProduction ? "mini-style-loader" : "style-loader",
+    },
+  ];
+  if (isProduction) {
+    loaders.push({ loader: "mini-css-runtime-loader" });
+  }
+  loaders.push({
+    loader: "css-loader",
+    options: cssOptions,
+  });
+  if (extraLoaders) loaders.push.apply(loaders, extraLoaders);
+  return loaders;
+}
+
 module.exports = function ({ isProduction, uniqueId, entrys }) {
   return {
     stats: "errors-only",
@@ -62,44 +83,33 @@ module.exports = function ({ isProduction, uniqueId, entrys }) {
           oneOf: [
             {
               test: /\.(M|m)odule\.css$/,
-              use: [
-                {
-                  loader: "style-loader",
-                },
-                {
-                  loader: "css-loader",
-                  options: {
-                    modules: {
-                      localIdentName: isProduction
-                        ? "[name]_[local]_[hash:base64:5]"
-                        : "[path][name]__[local]",
-                    },
-                  },
+              use: styleUse(isProduction, {
+                modules: {
+                  localIdentName: isProduction
+                    ? "[name]_[local]_[hash:base64:5]"
+                    : "[path][name]__[local]",
                 },
-              ],
+              }),
             },
             {
-              use: ["style-loader", "css-loader"],
+              use: styleUse(isProduction),
             },
           ],
         },
         {
           test: /\.less$/,
           include: [appSrc],
-          use: [
+          use: styleUse(
+            isProduction,
             {
-              loader: "style-loader",
+              modules: true,
             },
-            {
-              loader: "css-loader",
-              options: {
-                modules: true,
+            [
+              {
+                loader: "less-loader",
               },
-            },
-            {
-              loader: "less-loader",
-            },
-          ],
+            ]
+          ),
         },
         {
           test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/,

package/launcher/build.js

@@ -18,7 +18,13 @@ function canReadAsset(asset) {
 }
 
 module.exports = (name, option = {}) => {
-  const { unique = true, removeConsole } = option;
+  process.env.BABEL_ENV = 'production';
+  process.env.NODE_ENV = 'production';
+  const { unique = true, removeConsole, format = 'amd' } = option;
+  if (format !== 'amd' && format !== 'esm') {
+    console.log(chalk.red(`不支持的打包格式 "${format}"，可选：amd、esm`));
+    process.exit(1);
+  }
   return new Promise(async (resolve, reject) => {
     // 检查组件是否存在
     // 开始打包
@@ -53,10 +59,10 @@ module.exports = (name, option = {}) => {
     base.filename = `${componentInfo.dirname}`;
     base.module_name = `${base.module_name}${unique ? '.' + easyvcid : ''}`;
     const compiler = webpack(
-      getWebpackConfig(base, { uniqueId: easyvcid, removeConsole }),
+      getWebpackConfig(base, { uniqueId: easyvcid, removeConsole, format }),
     );
 
-    console.log('Creating an optimized production build...');
+    console.log(`Creating an optimized production build (${format})...`);
 
     compiler.run((err, stats) => {
       const message = stats.toJson({

package/loaders/mini-css-runtime-loader.js

@@ -0,0 +1,56 @@
+const crypto = require('crypto');
+
+function shortId(file) {
+  return crypto
+    .createHash('sha1')
+    .update(file)
+    .digest('base64')
+    .replace(/[+/=]/g, '')
+    .slice(0, 8);
+}
+
+const TINY_LIST = `var ___CSS_LOADER_EXPORT___ = [];
+___CSS_LOADER_EXPORT___.toString = function () {
+  return this.map(function (item) {
+    return item[1];
+  }).join("");
+};`;
+
+// Rewrites css-loader output so style injection does not pull in
+// css-loader/dist/runtime/api.js or noSourceMaps.js.
+module.exports = function miniCssRuntimeLoader(source) {
+  if (!source.includes('___CSS_LOADER_API_IMPORT___')) return source;
+
+  if (/___CSS_LOADER_EXPORT___\.i\(/.test(source)) {
+    this.emitError(
+      new Error(
+        `CSS @import / composes is not supported in the production build: ${this.resourcePath}`,
+      ),
+    );
+    return source;
+  }
+
+  const moduleId = JSON.stringify(shortId(this.resourcePath || ''));
+  let code = source
+    .replace(/import ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from [^;]+;\n?/g, '')
+    .replace(/import ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from [^;]+;\n?/g, '')
+    .replace(/import ___CSS_LOADER_API_IMPORT___ from [^;]+;\n?/g, '')
+    .replace(
+      /var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___\(___CSS_LOADER_API_(?:NO_)?SOURCEMAP_IMPORT___\);/,
+      TINY_LIST,
+    )
+    .replace(
+      /___CSS_LOADER_EXPORT___\.push\(\[module\.id,/g,
+      `___CSS_LOADER_EXPORT___.push([${moduleId},`,
+    );
+
+  if (code.includes('___CSS_LOADER_API_') || code.includes('[module.id,')) {
+    this.emitError(
+      new Error(
+        `mini-css-runtime-loader failed to strip css-loader runtime: ${this.resourcePath}`,
+      ),
+    );
+  }
+
+  return code;
+};

package/loaders/mini-style-loader.js

@@ -0,0 +1,19 @@
+function pitch(request) {
+  const contentRequest = JSON.stringify(
+    this.utils.contextify(this.context, `!!${request}`),
+  );
+
+  return `
+import content from ${contentRequest};
+var css = content && content.toString ? content.toString() : "";
+if (typeof document !== "undefined" && css) {
+  var style = document.createElement("style");
+  style.textContent = css;
+  document.head.appendChild(style);
+}
+export default content && content.locals;
+`;
+}
+
+module.exports = function miniStyleLoader() {};
+module.exports.pitch = pitch;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/react-component-builder",
-  "version": "0.24.0",
+  "version": "0.25.1",
   "files": [
     "launcher",
     "templates",
@@ -20,7 +20,7 @@
     "@babel/core": "^7.12.0",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/register": "^7.10.4",
-    "@easyv/react-gui": "3.1.0",
+    "@easyv/react-gui": "3.3.0",
     "@easyv/simulator": "0.6.11",
     "@svgr/webpack": "8.1.0",
     "acorn": "^7.3.1",