@easyv/react-component-builder 0.23.3 → 0.25.0-beta.1

package/config/webpack.config.build.js

@@ -10,31 +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: `${module_name}@${version}`,
-      libraryTarget: '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({
@@ -43,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",
@@ -54,9 +75,7 @@ module.exports = function ({ isProduction, uniqueId, entrys }) {
 
         {
           test: /\.js\.map$/,
-          use: {
-            loader: "file-loader",
-          },
+          type: "asset/resource",
         },
 
         {
@@ -64,51 +83,41 @@ 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",
-            },
-          ],
+            ]
+          ),
         },
         {
-          // exclude: /node_modules/,
           test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/,
-          loader: "url-loader",
-          options: {
-            limit: 20 * 1024 * 1024,
+          type: "asset",
+          parser: {
+            dataUrlCondition: {
+              maxSize: 20 * 1024 * 1024,
+            },
           },
         },
       ].filter(Boolean),

package/config/webpack.config.js

@@ -34,8 +34,7 @@ module.exports = ({ port, modules }) => {
     output: {
       filename: '[name].js',
       globalObject: 'this',
-      libraryTarget: 'var',
-      library: '__MAIN__', // 暴露到window上的属性名称
+      library: { name: '__MAIN__', type: 'var' }, // 暴露到window上的属性名称
     },
     devtool: 'source-map',
     plugins: [
@@ -75,7 +74,7 @@ module.exports = ({ port, modules }) => {
       client: {
         logging: 'warn',
       },
-      onBeforeSetupMiddleware: function (devServer) {
+      setupMiddlewares: (middlewares, devServer) => {
         if (!devServer) {
           throw new Error('webpack-dev-server is not defined');
         }
@@ -118,6 +117,7 @@ module.exports = ({ port, modules }) => {
             res.send(data);
           });
         });
+        return middlewares;
       },
     },
   };

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({
@@ -110,8 +116,10 @@ module.exports = (name, option = {}) => {
 
         console.log();
       }
+      const mainAsset = message.assetsByChunkName.main;
+      const mainFile = Array.isArray(mainAsset) ? mainAsset[0] : mainAsset;
       resolve({
-        file: path.join(message.outputPath, message.assetsByChunkName.main),
+        file: path.join(message.outputPath, mainFile),
         base,
         sourcePath: sourcePath,
       });

package/launcher/start.js

@@ -124,9 +124,10 @@ function start({ port, modules }) {
     },
   });
 
-  const server = new WebpackDevServer(compiler, config.devServer);
+  const devServerOptions = { ...config.devServer, host: HOST };
+  const server = new WebpackDevServer(devServerOptions, compiler);
 
-  server.listen(port, HOST, (err) => {
+  server.startCallback((err) => {
     if (err) {
       return console.log(err);
     }
@@ -140,8 +141,7 @@ function start({ port, modules }) {
 
   ['SIGINT', 'SIGTERM'].forEach(function (sig) {
     process.on(sig, function () {
-      server.close();
-      process.exit();
+      server.stopCallback(() => process.exit());
     });
   });
 }

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.23.3",
+  "version": "0.25.0-beta.1",
   "files": [
     "launcher",
     "templates",
@@ -17,7 +17,7 @@
     "postpublish": "sync-to-mirror"
   },
   "dependencies": {
-    "@babel/core": "7.9.0",
+    "@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",
@@ -26,32 +26,28 @@
     "acorn": "^7.3.1",
     "acorn-jsx": "^5.2.0",
     "antd": "^4.0.3",
-    "babel-loader": "8.1.0",
+    "babel-loader": "^9.2.0",
     "babel-plugin-named-asset-import": "^0.3.6",
     "babel-preset-react-app": "^10.0.1",
     "classnames": "^2.2.6",
-    "css-loader": "3.4.2",
+    "css-loader": "^6.11.0",
     "d3": "^5.16.0",
-    "expose-loader": "^1.0.0",
-    "file-loader": "4.3.0",
+    "expose-loader": "^4.0.0",
     "filesize": "^6.1.0",
     "fs-extra": "^9.0.1",
     "glob": "^7.1.6",
-    "html-webpack-plugin": "4.5.2",
+    "html-webpack-plugin": "^5.6.0",
     "inquirer": "^7.3.0",
-    "less-loader": "^6.2.0",
+    "less-loader": "^11.1.0",
     "lodash": "^4.17.19",
     "multer": "^1.4.2",
-    "optimize-css-assets-webpack-plugin": "6.0.1",
     "react": "^16.13.1",
     "react-dev-utils": "10.2.1",
     "react-dom": "^16.13.1",
-    "style-loader": "0.23.1",
+    "style-loader": "^3.3.0",
     "three": "^0.100.0",
-    "url-loader": "2.3.0",
-    "webpack": "4.47.0",
-    "webpack-dev-server": "4.15.1",
-    "webpack-manifest-plugin": "4.1.1"
+    "webpack": "^5.96.0",
+    "webpack-dev-server": "^5.1.0"
   },
   "devDependencies": {
     "@easyv/sync-to-mirror": "^0.0.2",
@@ -59,7 +55,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
-    "terser-webpack-plugin": "^4.2.3"
+    "terser-webpack-plugin": "^5.3.10"
   },
   "easyv": {
     "src": "examples",
@@ -69,9 +65,10 @@
       "online": "https://easyv.dtstack.com",
       "test": "http://172.16.10.70:1337"
     },
-    "assets": "https://easyv-develop.oss-cn-hangzhou.aliyuncs.com/"
+    "assets": "https://dt-easyv-prod.oss-cn-hangzhou.aliyuncs.com/"
   },
   "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
   }
 }