@easyv/react-component-builder 0.17.1 → 0.18.0

package/config/paths.js

@@ -1,24 +1,24 @@
-'use strict';
-
-const path = require('path');
-const __cwd = process.cwd();
-const __root = path.resolve(__dirname, '..');
-const appPackage = require(path.join(__cwd, 'package.json'));
-const userHome = require('os').homedir();
-
-module.exports = {
-  appPackage,
-  appBuild: path.resolve(__cwd, 'build'),
-  appSrc: path.resolve(__cwd, appPackage.easyv.src || 'src'),
-  appComponents: path.resolve(
-    __cwd,
-    (appPackage.easyv || {}).components || 'src/components',
-  ),
-  webpackConfigExtend: path.resolve(__cwd, 'webpack.extend.js'),
-  public: path.resolve(__root, 'public'),
-  ownLoaders: path.resolve(__root, 'loaders'),
-  templates: path.resolve(__root, 'templates'),
-  cliNodeModules: path.join(__root, 'node_modules'),
-  customTemplatesRoot: path.join(userHome, 'easyv_custom_templates'),
-  __root,
-};
+'use strict';
+
+const path = require('path');
+const __cwd = process.cwd();
+const __root = path.resolve(__dirname, '..');
+const appPackage = require(path.join(__cwd, 'package.json'));
+const userHome = require('os').homedir();
+
+module.exports = {
+  appPackage,
+  appBuild: path.resolve(__cwd, 'build'),
+  appSrc: path.resolve(__cwd, appPackage.easyv.src || 'src'),
+  appComponents: path.resolve(
+    __cwd,
+    (appPackage.easyv || {}).components || 'src/components',
+  ),
+  webpackConfigExtend: path.resolve(__cwd, 'webpack.extend.js'),
+  public: path.resolve(__root, 'public'),
+  ownLoaders: path.resolve(__root, 'loaders'),
+  templates: path.resolve(__root, 'templates'),
+  cliNodeModules: path.join(__root, 'node_modules'),
+  customTemplatesRoot: path.join(userHome, 'easyv_custom_templates'),
+  __root,
+};

package/config/webpack.config.build.js

@@ -1,70 +1,70 @@
-const fs = require("fs");
-const path = require("path");
-const TerserWebpackPlugin = require("terser-webpack-plugin");
-const commonConfig = require("./webpack.config.common");
-const { appComponents, appBuild, webpackConfigExtend } = require("./paths");
-const webpack = require("webpack");
-
-let webpackConfigExtendFn;
-if (fs.existsSync(webpackConfigExtend)) {
-  webpackConfigExtendFn = require(webpackConfigExtend);
-}
-
-process.env.NODE_ENV = "production";
-
-module.exports = (
-  { filename, module_name, version },
-  { uniqueId, removeConsole }
-) => {
-  const entry = path.resolve(appComponents, filename, "index");
-  const cf = {
-    ...commonConfig({ isProduction: true, uniqueId, entrys: [entry] }),
-    mode: process.env.NODE_ENV,
-    entry,
-    output: {
-      path: appBuild,
-      filename: `${filename}.${version}.js`,
-      library: `${module_name}@${version}`,
-      libraryTarget: "amd",
-    },
-    externals: [
-      "react",
-      "react-dom",
-      "three",
-      "lodash",
-      "d3",
-      "@material-ui/styles",
-    ],
-    devtool: false,
-    plugins: [
-      new webpack.ProvidePlugin({
-        THREE: "three",
-        React: "react",
-        ReactDom: "react-dom",
-      }),
-    ],
-  };
-
-  if (webpackConfigExtendFn) {
-    return webpackConfigExtendFn(cf, {
-      production: true,
-    });
-  }
-
-  if (removeConsole) {
-    cf["optimization"] = {
-      minimizer: [
-        new TerserWebpackPlugin({
-          parallel: true,
-          terserOptions: {
-            compress: {
-              drop_console: true,
-            },
-          },
-        }),
-      ],
-    };
-  }
-
-  return cf;
-};
+const fs = require("fs");
+const path = require("path");
+const TerserWebpackPlugin = require("terser-webpack-plugin");
+const commonConfig = require("./webpack.config.common");
+const { appComponents, appBuild, webpackConfigExtend } = require("./paths");
+const webpack = require("webpack");
+
+let webpackConfigExtendFn;
+if (fs.existsSync(webpackConfigExtend)) {
+  webpackConfigExtendFn = require(webpackConfigExtend);
+}
+
+process.env.NODE_ENV = "production";
+
+module.exports = (
+  { filename, module_name, version },
+  { uniqueId, removeConsole }
+) => {
+  const entry = path.resolve(appComponents, filename, "index");
+  const cf = {
+    ...commonConfig({ isProduction: true, uniqueId, entrys: [entry] }),
+    mode: process.env.NODE_ENV,
+    entry,
+    output: {
+      path: appBuild,
+      filename: `${filename}.${version}.js`,
+      library: `${module_name}@${version}`,
+      libraryTarget: "amd",
+    },
+    externals: [
+      "react",
+      "react-dom",
+      "three",
+      "lodash",
+      "d3",
+      "@material-ui/styles",
+    ],
+    devtool: false,
+    plugins: [
+      new webpack.ProvidePlugin({
+        THREE: "three",
+        React: "react",
+        ReactDom: "react-dom",
+      }),
+    ],
+  };
+
+  if (webpackConfigExtendFn) {
+    return webpackConfigExtendFn(cf, {
+      production: true,
+    });
+  }
+
+  if (removeConsole) {
+    cf["optimization"] = {
+      minimizer: [
+        new TerserWebpackPlugin({
+          parallel: true,
+          terserOptions: {
+            compress: {
+              drop_console: true,
+            },
+          },
+        }),
+      ],
+    };
+  }
+
+  return cf;
+};

package/config/webpack.config.common.js

@@ -1,126 +1,126 @@
-const { appSrc, ownLoaders, cliNodeModules } = require("../config/paths");
-
-module.exports = function ({ isProduction, uniqueId, entrys }) {
-  return {
-    stats: "errors-only",
-    module: {
-      rules: [
-        // three有些插件需要读全局变量
-        {
-          test: /three\.module/,
-          loader: "expose-loader",
-          options: {
-            exposes: {
-              globalName: "THREE",
-              override: true,
-            },
-          },
-        },
-        {
-          test: /\.(js|mjs|jsx|ts|tsx)$/,
-          include: appSrc,
-          loader: require.resolve("babel-loader"),
-          options: {
-            customize: require.resolve(
-              "babel-preset-react-app/webpack-overrides"
-            ),
-            presets: [require.resolve("babel-preset-react-app")],
-            plugins: [
-              [
-                require.resolve("babel-plugin-named-asset-import"),
-                {
-                  loaderMap: {
-                    svg: {
-                      ReactComponent:
-                        "@svgr/webpack?-svgo,+titleProp,+ref![path]",
-                    },
-                  },
-                },
-              ],
-            ],
-            cacheDirectory: false,
-            cacheCompression: false,
-          },
-        },
-        {
-          // 修改入口文件
-          test: Object.values(entrys), // 仅匹配所有组件的index文件
-          loader: "react-entry-loader",
-          options: {
-            isBuild: isProduction,
-            uniqueId,
-          },
-        },
-
-        {
-          test: /\.js\.map$/,
-          use: {
-            loader: "file-loader",
-          },
-        },
-
-        {
-          test: /\.css$/,
-          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: ["style-loader", "css-loader"],
-            },
-          ],
-        },
-        {
-          test: /\.less$/,
-          include: [appSrc],
-          use: [
-            {
-              loader: "style-loader",
-            },
-            {
-              loader: "css-loader",
-              options: {
-                modules: true,
-              },
-            },
-            {
-              loader: "less-loader",
-            },
-          ],
-        },
-        {
-          // exclude: /node_modules/,
-          test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/,
-          loader: "url-loader",
-          options: {
-            limit: 20 * 1024 * 1024,
-          },
-        },
-      ].filter(Boolean),
-    },
-
-    resolveLoader: {
-      modules: ["node_modules", ownLoaders, cliNodeModules],
-    },
-
-    resolve: {
-      extensions: [".js", ".jsx", ".tsx", ".ts"],
-      modules: ["node_modules", cliNodeModules],
-    },
-  };
-};
+const { appSrc, ownLoaders, cliNodeModules } = require("../config/paths");
+
+module.exports = function ({ isProduction, uniqueId, entrys }) {
+  return {
+    stats: "errors-only",
+    module: {
+      rules: [
+        // three有些插件需要读全局变量
+        {
+          test: /three\.module/,
+          loader: "expose-loader",
+          options: {
+            exposes: {
+              globalName: "THREE",
+              override: true,
+            },
+          },
+        },
+        {
+          test: /\.(js|mjs|jsx|ts|tsx)$/,
+          include: appSrc,
+          loader: require.resolve("babel-loader"),
+          options: {
+            customize: require.resolve(
+              "babel-preset-react-app/webpack-overrides"
+            ),
+            presets: [require.resolve("babel-preset-react-app")],
+            plugins: [
+              [
+                require.resolve("babel-plugin-named-asset-import"),
+                {
+                  loaderMap: {
+                    svg: {
+                      ReactComponent:
+                        "@svgr/webpack?-svgo,+titleProp,+ref![path]",
+                    },
+                  },
+                },
+              ],
+            ],
+            cacheDirectory: false,
+            cacheCompression: false,
+          },
+        },
+        {
+          // 修改入口文件
+          test: Object.values(entrys), // 仅匹配所有组件的index文件
+          loader: "react-entry-loader",
+          options: {
+            isBuild: isProduction,
+            uniqueId,
+          },
+        },
+
+        {
+          test: /\.js\.map$/,
+          use: {
+            loader: "file-loader",
+          },
+        },
+
+        {
+          test: /\.css$/,
+          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: ["style-loader", "css-loader"],
+            },
+          ],
+        },
+        {
+          test: /\.less$/,
+          include: [appSrc],
+          use: [
+            {
+              loader: "style-loader",
+            },
+            {
+              loader: "css-loader",
+              options: {
+                modules: true,
+              },
+            },
+            {
+              loader: "less-loader",
+            },
+          ],
+        },
+        {
+          // exclude: /node_modules/,
+          test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/,
+          loader: "url-loader",
+          options: {
+            limit: 20 * 1024 * 1024,
+          },
+        },
+      ].filter(Boolean),
+    },
+
+    resolveLoader: {
+      modules: ["node_modules", ownLoaders, cliNodeModules],
+    },
+
+    resolve: {
+      extensions: [".js", ".jsx", ".tsx", ".ts"],
+      modules: ["node_modules", cliNodeModules],
+    },
+  };
+};

package/config/webpack.config.js

@@ -1,116 +1,116 @@
-const HtmlPlugin = require('html-webpack-plugin');
-const path = require('path');
-const fs = require('fs');
-const commonConfig = require('./webpack.config.common');
-const webpack = require('webpack');
-const { appPackage, public, webpackConfigExtend, cliNodeModules } = require('./paths');
-
-let webpackConfigExtendFn;
-if (fs.existsSync(webpackConfigExtend)) {
-  webpackConfigExtendFn = require(webpackConfigExtend);
-}
-
-process.env.NODE_ENV = 'development';
-
-module.exports = ({ port, modules }) => {
-
-  const entrys = modules.reduce((acc, item) => {
-    acc[item.name] = path.resolve(item.path)
-    return acc
-  }, {})
-
-  const cf = {
-    ...commonConfig({
-      isProduction: false,
-      entrys
-    }),
-
-    mode: 'development',
-    entry: entrys,
-    output: {
-      filename: '[name].js',
-      globalObject: 'this',
-      libraryTarget: 'var',
-      library: '__MAIN__' // 暴露到window上的属性名称
-    },
-    devtool: 'source-map',
-    plugins: [
-      new webpack.ProvidePlugin({
-        THREE: 'three',
-        React: 'react',
-        ReactDom: 'react-dom',
-      }),
-      new HtmlPlugin({
-        filename: 'index.html',
-        template: path.join(public, 'home.ejs'),
-        templateParameters: {
-          'modules': Object.keys(entrys).toString()
-        },
-        chunks: ['']
-      }),
-      ...Object.keys(entrys).map(name => {
-        return new HtmlPlugin({
-          filename: `${name}.html`,
-          template: path.join(public, 'component.ejs'),
-          templateParameters: {
-            "module_name": name,
-            "assets": appPackage.easyv.assets,
-          },
-          chunks: [name]
-        })
-      })
-    ],
-    externals: {
-      'react': 'react',
-      'react-dom': 'ReactDOM'
-    },
-
-    devServer: {
-      port,
-      hot: false,
-      quiet: true,
-      before: function (app, server, compiler) {
-        var multer = require('multer')
-        var storage = multer.memoryStorage()
-        var upload = multer({ storage: storage })
-        const fileCache = new Map();
-        // 用户资源上传
-        app.post('/__develop__/assets', upload.single('file'), function (req, res) {
-          const a = req.file;
-          fileCache.set(a.originalname, a.buffer)
-          res.json({ url: `${req.url}/${a.originalname}` });
-        });
-        // 用户资源获取
-        app.get('/__develop__/assets/:name', function (req, res) {
-          const file = fileCache.get(req.params.name);
-          if (!file) return res.status(404);
-          res.send(file)
-        });
-        // 静态资源
-        app.get('/static/*', function (req, res) {
-          let filepath;
-          [cliNodeModules].find((root) => {
-            const p = req.url.replace('/static', root);
-            if (fs.existsSync(p)) {
-              filepath = p;
-              return true;
-            }
-          })
-          if (!filepath) return res.status(404).end();
-          fs.readFile(filepath, (err, data) => {
-            if (err) { return res.status(404).end() }
-            res.send(data)
-          })
-        });
-      }
-    }
-  }
-
-  if (webpackConfigExtendFn) {
-    return webpackConfigExtendFn(cf, {
-      production: false
-    })
-  }
-
-  return cf;
-};
+const HtmlPlugin = require('html-webpack-plugin');
+const path = require('path');
+const fs = require('fs');
+const commonConfig = require('./webpack.config.common');
+const webpack = require('webpack');
+const { appPackage, public, webpackConfigExtend, cliNodeModules } = require('./paths');
+
+let webpackConfigExtendFn;
+if (fs.existsSync(webpackConfigExtend)) {
+  webpackConfigExtendFn = require(webpackConfigExtend);
+}
+
+process.env.NODE_ENV = 'development';
+
+module.exports = ({ port, modules }) => {
+
+  const entrys = modules.reduce((acc, item) => {
+    acc[item.name] = path.resolve(item.path)
+    return acc
+  }, {})
+
+  const cf = {
+    ...commonConfig({
+      isProduction: false,
+      entrys
+    }),
+
+    mode: 'development',
+    entry: entrys,
+    output: {
+      filename: '[name].js',
+      globalObject: 'this',
+      libraryTarget: 'var',
+      library: '__MAIN__' // 暴露到window上的属性名称
+    },
+    devtool: 'source-map',
+    plugins: [
+      new webpack.ProvidePlugin({
+        THREE: 'three',
+        React: 'react',
+        ReactDom: 'react-dom',
+      }),
+      new HtmlPlugin({
+        filename: 'index.html',
+        template: path.join(public, 'home.ejs'),
+        templateParameters: {
+          'modules': Object.keys(entrys).toString()
+        },
+        chunks: ['']
+      }),
+      ...Object.keys(entrys).map(name => {
+        return new HtmlPlugin({
+          filename: `${name}.html`,
+          template: path.join(public, 'component.ejs'),
+          templateParameters: {
+            "module_name": name,
+            "assets": appPackage.easyv.assets,
+          },
+          chunks: [name]
+        })
+      })
+    ],
+    externals: {
+      'react': 'react',
+      'react-dom': 'ReactDOM'
+    },
+
+    devServer: {
+      port,
+      hot: false,
+      quiet: true,
+      before: function (app, server, compiler) {
+        var multer = require('multer')
+        var storage = multer.memoryStorage()
+        var upload = multer({ storage: storage })
+        const fileCache = new Map();
+        // 用户资源上传
+        app.post('/__develop__/assets', upload.single('file'), function (req, res) {
+          const a = req.file;
+          fileCache.set(a.originalname, a.buffer)
+          res.json({ url: `${req.url}/${a.originalname}` });
+        });
+        // 用户资源获取
+        app.get('/__develop__/assets/:name', function (req, res) {
+          const file = fileCache.get(req.params.name);
+          if (!file) return res.status(404);
+          res.send(file)
+        });
+        // 静态资源
+        app.get('/static/*', function (req, res) {
+          let filepath;
+          [cliNodeModules].find((root) => {
+            const p = req.url.replace('/static', root);
+            if (fs.existsSync(p)) {
+              filepath = p;
+              return true;
+            }
+          })
+          if (!filepath) return res.status(404).end();
+          fs.readFile(filepath, (err, data) => {
+            if (err) { return res.status(404).end() }
+            res.send(data)
+          })
+        });
+      }
+    }
+  }
+
+  if (webpackConfigExtendFn) {
+    return webpackConfigExtendFn(cf, {
+      production: false
+    })
+  }
+
+  return cf;
+};