@easyv/react-component-builder 0.18.1 → 0.19.1

package/config/webpack.config.build.js

@@ -1,46 +1,46 @@
-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");
+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";
+process.env.NODE_ENV = 'production';
 
 module.exports = (
   { filename, module_name, version },
-  { uniqueId, removeConsole }
+  { uniqueId, removeConsole },
 ) => {
-  const entry = path.resolve(appComponents, filename, "index");
+  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`,
+      filename: `${module_name}.${version}.js`,
       library: `${module_name}@${version}`,
-      libraryTarget: "amd",
+      libraryTarget: 'amd',
     },
     externals: [
-      "react",
-      "react-dom",
-      "three",
-      "lodash",
-      "d3",
-      "@material-ui/styles",
+      'react',
+      'react-dom',
+      'three',
+      'lodash',
+      'd3',
+      '@material-ui/styles',
     ],
     devtool: false,
     plugins: [
       new webpack.ProvidePlugin({
-        THREE: "three",
-        React: "react",
-        ReactDom: "react-dom",
+        THREE: 'three',
+        React: 'react',
+        ReactDom: 'react-dom',
       }),
     ],
   };
@@ -52,7 +52,7 @@ module.exports = (
   }
 
   if (removeConsole) {
-    cf["optimization"] = {
+    cf['optimization'] = {
       minimizer: [
         new TerserWebpackPlugin({
           parallel: true,

package/config/webpack.config.js

@@ -3,7 +3,12 @@ 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');
+const {
+  appPackage,
+  public: publicPath,
+  webpackConfigExtend,
+  cliNodeModules,
+} = require('./paths');
 
 let webpackConfigExtendFn;
 if (fs.existsSync(webpackConfigExtend)) {
@@ -13,16 +18,15 @@ if (fs.existsSync(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
-  }, {})
+    acc[item.name] = path.resolve(item.path);
+    return acc;
+  }, {});
 
   const cf = {
     ...commonConfig({
       isProduction: false,
-      entrys
+      entrys,
     }),
 
     mode: 'development',
@@ -31,7 +35,7 @@ module.exports = ({ port, modules }) => {
       filename: '[name].js',
       globalObject: 'this',
       libraryTarget: 'var',
-      library: '__MAIN__' // 暴露到window上的属性名称
+      library: '__MAIN__', // 暴露到window上的属性名称
     },
     devtool: 'source-map',
     plugins: [
@@ -42,27 +46,27 @@ module.exports = ({ port, modules }) => {
       }),
       new HtmlPlugin({
         filename: 'index.html',
-        template: path.join(public, 'home.ejs'),
+        template: path.join(publicPath, 'home.ejs'),
         templateParameters: {
-          'modules': Object.keys(entrys).toString()
+          modules: Object.keys(entrys).toString(),
         },
-        chunks: ['']
+        chunks: [''],
       }),
-      ...Object.keys(entrys).map(name => {
+      ...Object.keys(entrys).map((name) => {
         return new HtmlPlugin({
           filename: `${name}.html`,
-          template: path.join(public, 'component.ejs'),
+          template: path.join(publicPath, 'component.ejs'),
           templateParameters: {
-            "module_name": name,
-            "assets": appPackage.easyv.assets,
+            module_name: name,
+            assets: appPackage.easyv.assets,
           },
-          chunks: [name]
-        })
-      })
+          chunks: [name],
+        });
+      }),
     ],
     externals: {
-      'react': 'react',
-      'react-dom': 'ReactDOM'
+      react: 'react',
+      'react-dom': 'ReactDOM',
     },
 
     devServer: {
@@ -70,21 +74,25 @@ module.exports = ({ port, modules }) => {
       hot: false,
       quiet: true,
       before: function (app, server, compiler) {
-        var multer = require('multer')
-        var storage = multer.memoryStorage()
-        var upload = multer({ storage: storage })
+        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.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)
+          res.send(file);
         });
         // 静态资源
         app.get('/static/*', function (req, res) {
@@ -95,21 +103,23 @@ module.exports = ({ port, modules }) => {
               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 (err) {
+              return res.status(404).end();
+            }
+            res.send(data);
+          });
         });
-      }
-    }
-  }
+      },
+    },
+  };
 
   if (webpackConfigExtendFn) {
     return webpackConfigExtendFn(cf, {
-      production: false
-    })
+      production: false,
+    });
   }
 
   return cf;

package/launcher/build.js

@@ -1,11 +1,12 @@
-const fs = require("fs");
-const path = require("path");
-const chalk = require("chalk");
-const webpack = require("webpack");
-const filesize = require("filesize");
-const { appComponents, appBuild } = require("../config/paths");
-const { checkComponentFiles } = require("../utils");
-const getWebpackConfig = require("../config/webpack.config.build");
+const fs = require('fs');
+const path = require('path');
+const chalk = require('chalk');
+const webpack = require('webpack');
+const filesize = require('filesize');
+const { appComponents, appBuild } = require('../config/paths');
+const { checkComponentFiles } = require('../utils');
+const getWebpackConfig = require('../config/webpack.config.build');
+const { getBuildEntrys } = require('./start');
 
 function canReadAsset(asset) {
   return (
@@ -17,68 +18,78 @@ function canReadAsset(asset) {
 
 module.exports = (name, option = {}) => {
   const { unique = true, removeConsole } = option;
-  return new Promise((resolve, reject) => {
+  return new Promise(async (resolve, reject) => {
     // 检查组件是否存在
     // 开始打包
     // 打包成功 返回bundle路径
-
-    const sourcePath = path.join(appComponents, name);
+    const result = await getBuildEntrys();
+    const componentInfo = result.find((d) => d.name === name);
+    const { base } = componentInfo;
+    const sourcePath = componentInfo.path.slice(
+      0,
+      componentInfo.path.lastIndexOf('/'),
+    );
+    // const sourcePath = path.join(appComponents, name);
 
     let easyvcid;
     if (unique) {
       // 生成组件唯一标识
-      const easyvc = path.join(sourcePath, ".easyvc");
+      const easyvc = path.join(sourcePath, '.easyvc');
       if (fs.existsSync(easyvc)) {
-        easyvcid = fs.readFileSync(easyvc, { encoding: "utf8" });
+        easyvcid = fs.readFileSync(easyvc, { encoding: 'utf8' });
       }
       if (!easyvcid) {
         easyvcid = Array.from({ length: 6 })
           .map(() => Math.random().toString(32).slice(2, 3))
-          .join("");
-        fs.writeFileSync(easyvc, easyvcid, { encoding: "utf8" });
+          .join('');
+        fs.writeFileSync(easyvc, easyvcid, { encoding: 'utf8' });
       }
     }
 
     // 重写base的modulename
-    const { base } = checkComponentFiles(sourcePath);
-    base.filename = `${base.module_name}`;
-    base.module_name = `${base.module_name}${unique ? "." + easyvcid : ""}`;
+    // const { base } = checkComponentFiles(sourcePath);
+    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 }),
     );
 
-    console.log("Creating an optimized production build...");
+    console.log('Creating an optimized production build...');
 
     compiler.run((err, stats) => {
-      const message = stats.toJson({ all: true, warnings: true, errors: true });
+      const message = stats.toJson({
+        all: true,
+        warnings: true,
+        errors: true,
+      });
 
       const errors = err || message.errors;
       if (errors.length) {
-        console.log(chalk.red("Failed to compile.\n"));
-        console.log(chalk.red(errors + "\n"));
+        console.log(chalk.red('Failed to compile.\n'));
+        console.log(chalk.red(errors + '\n'));
         process.exit(1);
       }
 
       if (message.warnings.length) {
-        console.log(chalk.yellow("Compiled with warnings.\n"));
-        console.log(message.warnings.join("\n\n"));
+        console.log(chalk.yellow('Compiled with warnings.\n'));
+        console.log(message.warnings.join('\n\n'));
       } else {
         // successful
-        console.log(chalk.green("Compiled successfully."));
+        console.log(chalk.green('Compiled successfully.'));
         console.log(`Time: ${message.time / 1000}s`);
         console.log(`Built at: ${new Date(message.builtAt)}\n`);
-        console.log("File sizes:\n");
+        console.log('File sizes:\n');
 
         message.assets
           .filter((asset) => canReadAsset(asset.name))
           .map((asset) => {
             var fileContents = fs.readFileSync(
-              path.resolve(appBuild, asset.name)
+              path.resolve(appBuild, asset.name),
             );
             return {
               folder: path.join(
                 path.basename(appBuild),
-                path.dirname(asset.name)
+                path.dirname(asset.name),
               ),
               name: path.basename(asset.name),
               size: filesize(fileContents.length),
@@ -87,11 +98,11 @@ module.exports = (name, option = {}) => {
           .sort((a, b) => b.size - a.size)
           .map((asset) => {
             console.log(
-              "  " +
+              '  ' +
                 asset.size +
-                "  " +
+                '  ' +
                 chalk.dim(asset.folder + path.sep) +
-                chalk.cyan(asset.name)
+                chalk.cyan(asset.name),
             );
           });
 

package/launcher/start.js

@@ -1,22 +1,22 @@
-const webpack = require("webpack");
-const WebpackDevServer = require("webpack-dev-server");
-const getWebpackConfig = require("../config/webpack.config");
-const chalk = require("chalk");
-const glob = require("glob");
-const { appComponents, appPackage } = require("../config/paths");
-const { checkComponentFiles } = require("../utils");
-const autoAssignPort = require("../utils/auto-assign-port");
-const path = require("path");
-const openBrowser = require("../utils/openBrowser");
+const webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
+const getWebpackConfig = require('../config/webpack.config');
+const chalk = require('chalk');
+const glob = require('glob');
+const { appComponents, appPackage } = require('../config/paths');
+const { checkComponentFiles } = require('../utils');
+const autoAssignPort = require('../utils/auto-assign-port');
+const path = require('path');
+const openBrowser = require('../utils/openBrowser');
 
 const isInteractive = process.stdout.isTTY;
 const DEFAULT_PORT = 3005;
-const HOST = process.env.HOST || "0.0.0.0";
+const HOST = process.env.HOST || '0.0.0.0';
 let isFirstCompile = true;
 
 function clearConsole() {
   process.stdout.write(
-    process.platform === "win32" ? "\x1B[2J\x1B[0f" : "\x1B[2J\x1B[3J\x1B[H"
+    process.platform === 'win32' ? '\x1B[2J\x1B[0f' : '\x1B[2J\x1B[3J\x1B[H',
   );
 }
 
@@ -27,7 +27,7 @@ function printInstructions(appName, urls) {
 
   if (urls.lanUrlForTerminal) {
     console.log(
-      `  ${chalk.bold("Local:")}            ${urls.localUrlForTerminal}`
+      `  ${chalk.bold('Local:')}            ${urls.localUrlForTerminal}`,
     );
     // console.log(
     //   `  ${chalk.bold('On Your Network:')}  ${urls.lanUrlForTerminal}`
@@ -42,7 +42,7 @@ function createCompiler({ appName, config, urls }) {
   try {
     compiler = webpack(config);
   } catch (err) {
-    console.log(chalk.red("Failed to compile."));
+    console.log(chalk.red('Failed to compile.'));
     console.log();
     console.log(err.message || err);
     console.log();
@@ -53,16 +53,16 @@ function createCompiler({ appName, config, urls }) {
   // recompiling a bundle. WebpackDevServer takes care to pause serving the
   // bundle, so if you refresh, it'll wait instead of serving the old one.
   // "invalid" is short for "bundle invalidated", it doesn't imply any errors.
-  compiler.hooks.invalid.tap("invalid", () => {
+  compiler.hooks.invalid.tap('invalid', () => {
     if (isInteractive) {
       clearConsole();
     }
-    console.log("Compiling...");
+    console.log('Compiling...');
   });
 
   // "done" event fires when webpack has finished recompiling the bundle.
   // Whether or not you have warnings or errors, you will get this event.
-  compiler.hooks.done.tap("done", async (stats) => {
+  compiler.hooks.done.tap('done', async (stats) => {
     if (isInteractive) {
       clearConsole();
     }
@@ -76,7 +76,7 @@ function createCompiler({ appName, config, urls }) {
     const messages = statsData;
     const isSuccessful = !messages.errors.length && !messages.warnings.length;
     if (isSuccessful) {
-      console.log(chalk.green("Compiled successfully!"));
+      console.log(chalk.green('Compiled successfully!'));
     }
     if (isSuccessful && (isInteractive || isFirstCompile)) {
       printInstructions(appName, urls);
@@ -87,24 +87,24 @@ function createCompiler({ appName, config, urls }) {
       if (messages.errors.length > 1) {
         messages.errors.length = 1;
       }
-      console.log(chalk.red("Failed to compile.\n"));
-      console.log(messages.errors.join("\n\n"));
+      console.log(chalk.red('Failed to compile.\n'));
+      console.log(messages.errors.join('\n\n'));
       return;
     }
 
     if (messages.warnings.length) {
-      console.log(chalk.yellow("Compiled with warnings.\n"));
-      console.log(messages.warnings.join("\n\n"));
+      console.log(chalk.yellow('Compiled with warnings.\n'));
+      console.log(messages.warnings.join('\n\n'));
 
       console.log(
-        "\nSearch for the " +
-          chalk.underline(chalk.yellow("keywords")) +
-          " to learn more about each warning."
+        '\nSearch for the ' +
+          chalk.underline(chalk.yellow('keywords')) +
+          ' to learn more about each warning.',
       );
       console.log(
-        "To ignore, add " +
-          chalk.cyan("// eslint-disable-next-line") +
-          " to the line before.\n"
+        'To ignore, add ' +
+          chalk.cyan('// eslint-disable-next-line') +
+          ' to the line before.\n',
       );
     }
   });
@@ -134,11 +134,11 @@ function start({ port, modules }) {
       clearConsole();
     }
 
-    console.log(chalk.cyan("Starting the development server...\n"));
+    console.log(chalk.cyan('Starting the development server...\n'));
     openBrowser(url);
   });
 
-  ["SIGINT", "SIGTERM"].forEach(function (sig) {
+  ['SIGINT', 'SIGTERM'].forEach(function (sig) {
     process.on(sig, function () {
       server.close();
       process.exit();
@@ -148,15 +148,15 @@ function start({ port, modules }) {
 
 function getBuildEntrys(modules = []) {
   // 优先级
-  const suffix = ["jsx", "tsx", "js", "ts"];
+  const suffix = ['jsx', 'tsx', 'js', 'ts'];
 
-  return new Promise((resolve, reject) => {
+  return new Promise((resolve) => {
     // 两种获取方式配置方式
-    // new configs: ['config/main.json', 'config/main.data.json']
+    // new configs: ['config/main.(json|js)', 'config/main.data.(json|js)']
     // old configs: ['config/base.js', 'config/config.js', 'mock/data.js']
 
     glob(
-      `*/index.+(${suffix.join("|")})`,
+      `*/index.+(${suffix.join('|')})`,
       {
         cwd: appComponents,
       },
@@ -169,10 +169,17 @@ function getBuildEntrys(modules = []) {
         if (!matches.length) process.exit();
 
         const dir = matches.reduce((acc, path) => {
-          const name = path.slice(0, path.indexOf("/"));
-          if (modules.length && !~modules.indexOf(name)) return acc; // 排除不打包的 如果目录是空的则忽略
-          if (!acc[name]) acc[name] = [path];
-          else acc[name].push(path);
+          const name = path.slice(0, path.indexOf('/'));
+          if (modules.length && modules.indexOf(name) === -1) {
+            // 排除不打包的 如果目录是空的则忽略
+            return acc;
+          }
+          if (!acc[name]) {
+            acc[name] = [path];
+          } else {
+            acc[name].push(path);
+          }
+
           return acc;
         }, {});
 
@@ -183,7 +190,7 @@ function getBuildEntrys(modules = []) {
           let indexPath;
           suffix.every((ext) => {
             const i = dir[dirname].findIndex((path) =>
-              path.endsWith("." + ext)
+              path.endsWith('.' + ext),
             );
             return i > -1
               ? ((indexPath = path.join(appComponents, dir[dirname][i])), false)
@@ -191,7 +198,7 @@ function getBuildEntrys(modules = []) {
           });
 
           const { base } = checkComponentFiles(
-            path.join(appComponents, dirname)
+            path.join(appComponents, dirname),
           );
 
           // 组件名称重复检查
@@ -215,7 +222,7 @@ function getBuildEntrys(modules = []) {
         } else {
           process.exit();
         }
-      }
+      },
     );
   });
 }
@@ -227,3 +234,5 @@ module.exports = (modules) => {
     });
   });
 };
+
+module.exports.getBuildEntrys = getBuildEntrys;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/react-component-builder",
-  "version": "0.18.1",
+  "version": "0.19.1",
   "files": [
     "launcher",
     "templates",
@@ -12,7 +12,9 @@
   "scripts": {
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
-    "generate": "node scripts/generate.js"
+    "generate": "node scripts/generate.js",
+    "push": "npm publish",
+    "postpublish": "sync-to-mirror"
   },
   "dependencies": {
     "@babel/core": "7.9.0",
@@ -51,6 +53,7 @@
     "webpack-manifest-plugin": "2.2.0"
   },
   "devDependencies": {
+    "@easyv/sync-to-mirror": "^0.0.2",
     "@types/lodash": "^4.14.157",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
@@ -66,5 +69,8 @@
       "test": "http://172.16.10.70:1337"
     },
     "assets": "https://easyv-develop.oss-cn-hangzhou.aliyuncs.com/"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
   }
-}
+}