@autobest-ui/scripts 0.0.5 → 0.1.3

package/README.md

@@ -1 +1,120 @@
-# @autobest-ui/scripts
+# @autobest-ui/scripts
+
+## 介绍
+集成react项目在webpack下debug、build， 统一命令，方便维护与升级。
+
+## 安装
+`npm install @autobest-ui/scripts --save-dev`
+
+## 使用方式
+
+#### 单页面应用（SPA）
+1. 本地 hot debug: `react-spa start`
+
+2. build: `react-spa build`
+
+#### 服务端渲染应用（SSR）
+1. 本地 client hot debug: `react-ssr start`
+
+2. 本地 server hot debug: `react-ssr server`
+
+3. build: `react-ssr build`
+   
+## 配置文件
+根目录下创建`config`文件夹
+
+```
+config
+   app.config.js // 为命令提供的私有配置
+   app.webpack.js // 扩展webpack配置， 非必须选
+   env.js        // 项目私有配置（比如： API BaseUrl配置），这个名字可以自定义
+```
+
+#### app.webpack.js 介绍
+
+该文件用于webpack扩展， 非必写。写法如下：
+
+```
+module.exports = function(
+  result,
+  appConfig,
+  extendEnv,
+  { isProd, isServer, isHotServer, isSetCommonAlias }
+) {
+   // 根据条件，对不同环境的配置进行扩展
+   ......
+   // 最终返回扩展后的结果
+   return result;
+}
+```
+
+#### app.config.js 介绍
+
+##### start 配置参数说明(作用于`react-spa start` 或者 `react-ssr start`)
+|  参数名   | 说明  |
+|  ----  | ----  |
+| startEntry  | start入口文件 |
+| startDefaultPort  | start默认端口号， 可自定义，下面介绍 |
+| startOpenPath  | start 打开浏览器的路径 |
+| startOutput.publicPath  | start加载资源的路径 |
+| startOutput.path  | start 资源根路径 |
+| getStartEnvConfig  | start 自定义环境变量的方法，会追加到process.env中 |
+
+##### hot ssr 配置参数说明(作用于`react-ssr ssr`)
+|  参数名   | 说明  |
+|  ----  | ----  |
+| hotSsrClientEntry  | hot ssr 客户端入口文件 |
+| hotSsrServerEntry  | hot ssr 服务端入口文件 |
+| hotSsrDefaultPort  | hot ssr默认端口号， 可自定义，下面介绍 |
+| hotSsrOpenPath  | hot ssr 打开浏览器的路径 |
+| hotSsrRunPath  | hot ssr 执行nodejs 入口文件路径 |
+| hotSsrWatch  | hot ssr 需要watch的文件夹，类型： Array |
+| hotSsrClientOutput.publicPath  | hot ssr客户端加载资源的路径 |
+| hotSsrClientOutput.path  | hot ssr 客户端资源根路径 |
+| hotSsrServerOutput.publicPath  | hot ssr 服务端加载资源的路径 |
+| hotSsrServerOutput.path  | hot ssr 服务端资源根路径 |
+| getHotSsrEnvConfig  | hot ssr 自定义环境变量的方法，会追加到process.env中 |
+
+##### hot ssr 配置参数说明(作用于`react-ssr build`)
+|  参数名   | 说明  |
+|  ----  | ----  |
+| buildClientEntry  | build ssr 客户端入口文件 |
+| buildServerEntry  | build ssr 客户端入口文件 |
+| buildClientOutput.publicPath  | build ssr客户端加载资源的路径 |
+| buildClientOutput.path  | build ssr 客户端资源根路径 |
+| buildServerOutput.publicPath  | build ssr 服务端加载资源的路径 |
+| buildServerOutput.path  | build ssr 服务端资源根路径 |
+| getBuildEnvConfig  | build ssr 自定义环境变量的方法，会追加到process.env中 |
+| buildClientLoadableConfig.filename  | build ssr 自定义按需加载路径存储库文件名 |
+| buildClientLoadableConfig.writeToDiskFilename  | build ssr 自定义按需加载路径存储库文件存放位置 |
+
+##### 公共配置
+|  参数名   | 说明  |
+|  ----  | ----  |
+| htmlPluginTemplate  | client端，模板html路径 |
+| alias  | debug, build 下文件别名，同webpack.resolve.alias一样  |
+
+## 自定义
+
+#### 自定义端口
+
+##### react-spa 自定义方式
+`react-spa start --port 3031` 或者已经在package.json.scripts中定义后(`{start: "react-spa start"}`), 将需要这样写 `npm run start -- --port 3031`
+
+##### react-ssr 自定义方式
+1. `react-ssr start --port 3031` 或者已经在package.json.scripts中定义后(`{start: "react-ssr start"}`), 将需要这样写 `npm run start -- --port 3031`
+1. `react-ssr server --port 3031` 或者已经在package.json.scripts中定义后(`{server: "react-ssr server"}`), 将需要这样写 `npm run server -- --port 3031`
+
+
+#### 自定义其他参数
+**例如：**
+`react-spa start --site APW`
+`react-ssr start --port 3032 --site APW`
+
+该参数将解析成对象，通过get**EnvConfig()参数传递，此方式，可区分自定义的环境变量，例如：www2.0项目中site的区分。
+
+
+### 自定义环境变量
+该方式，主要应用于启动程序前，自定义环境变量，主要用于get**EnvConfig()方法的多样性。
+
+例如： `cross-env REACT_APP_ENV=local react-ssr start`

package/bin/spa.js

@@ -1,44 +1,44 @@
-#!/usr/bin/env node
-
-process.on('unhandledRejection', err => {
-  // eslint-disable-next-line @typescript-eslint/no-throw-literal
-  throw err;
-});
-
-const spawn = require('cross-spawn');
-
-const args = process.argv.slice(2);
-
-const scriptIndex = args.findIndex(x => x === 'build' || x === 'start');
-const script = scriptIndex === -1 ? args[0] : args[scriptIndex];
-const nodeArgs = scriptIndex > 0 ? args.slice(0, scriptIndex) : [];
-
-if (['build', 'start'].includes(script)) {
-  const result = spawn.sync(
-    process.execPath,
-    nodeArgs.concat(require.resolve(`../spaConfig/${script}`)).concat(args.slice(scriptIndex + 1)),
-    { stdio: 'inherit' }
-  );
-  if (result.signal) {
-    if (result.signal === 'SIGKILL') {
-      // eslint-disable-next-line no-console
-      console.log(
-        'The build failed because the process exited too early. ' +
-          'This probably means the system ran out of memory or someone called ' +
-          '`kill -9` on the process.'
-      );
-    } else if (result.signal === 'SIGTERM') {
-      // eslint-disable-next-line no-console
-      console.log(
-        'The build failed because the process exited too early. ' +
-          'Someone might have called `kill` or `killall`, or the system could ' +
-          'be shutting down.'
-      );
-    }
-    process.exit(1);
-  }
-  process.exit(result.status);
-} else {
-  // eslint-disable-next-line no-console
-  console.log(`Unknown script "${script}".`);
-}
+#!/usr/bin/env node
+
+process.on('unhandledRejection', err => {
+  // eslint-disable-next-line @typescript-eslint/no-throw-literal
+  throw err;
+});
+
+const spawn = require('cross-spawn');
+
+const args = process.argv.slice(2);
+
+const scriptIndex = args.findIndex(x => x === 'build' || x === 'start');
+const script = scriptIndex === -1 ? args[0] : args[scriptIndex];
+const nodeArgs = scriptIndex > 0 ? args.slice(0, scriptIndex) : [];
+
+if (['build', 'start'].includes(script)) {
+  const result = spawn.sync(
+    process.execPath,
+    nodeArgs.concat(require.resolve(`../spaConfig/${script}`)).concat(args.slice(scriptIndex + 1)),
+    { stdio: 'inherit' }
+  );
+  if (result.signal) {
+    if (result.signal === 'SIGKILL') {
+      // eslint-disable-next-line no-console
+      console.log(
+        'The build failed because the process exited too early. ' +
+          'This probably means the system ran out of memory or someone called ' +
+          '`kill -9` on the process.'
+      );
+    } else if (result.signal === 'SIGTERM') {
+      // eslint-disable-next-line no-console
+      console.log(
+        'The build failed because the process exited too early. ' +
+          'Someone might have called `kill` or `killall`, or the system could ' +
+          'be shutting down.'
+      );
+    }
+    process.exit(1);
+  }
+  process.exit(result.status);
+} else {
+  // eslint-disable-next-line no-console
+  console.log(`Unknown script "${script}".`);
+}

package/bin/ssr.js

@@ -1,44 +1,44 @@
-#!/usr/bin/env node
-
-process.on('unhandledRejection', err => {
-  // eslint-disable-next-line @typescript-eslint/no-throw-literal
-  throw err;
-});
-
-const spawn = require('cross-spawn');
-
-const args = process.argv.slice(2);
-
-const scriptIndex = args.findIndex(x => x === 'build' || x === 'start' || 'server');
-const script = scriptIndex === -1 ? args[0] : args[scriptIndex];
-const nodeArgs = scriptIndex > 0 ? args.slice(0, scriptIndex) : [];
-
-if (['build', 'start', 'server'].includes(script)) {
-  const result = spawn.sync(
-    process.execPath,
-    nodeArgs.concat(require.resolve(`../ssrConfig/${script}`)).concat(args.slice(scriptIndex + 1)),
-    { stdio: 'inherit' }
-  );
-  if (result.signal) {
-    if (result.signal === 'SIGKILL') {
-      // eslint-disable-next-line no-console
-      console.log(
-        'The build failed because the process exited too early. ' +
-          'This probably means the system ran out of memory or someone called ' +
-          '`kill -9` on the process.'
-      );
-    } else if (result.signal === 'SIGTERM') {
-      // eslint-disable-next-line no-console
-      console.log(
-        'The build failed because the process exited too early. ' +
-          'Someone might have called `kill` or `killall`, or the system could ' +
-          'be shutting down.'
-      );
-    }
-    process.exit(1);
-  }
-  process.exit(result.status);
-} else {
-  // eslint-disable-next-line no-console
-  console.log(`Unknown script "${script}".`);
-}
+#!/usr/bin/env node
+
+process.on('unhandledRejection', err => {
+  // eslint-disable-next-line @typescript-eslint/no-throw-literal
+  throw err;
+});
+
+const spawn = require('cross-spawn');
+
+const args = process.argv.slice(2);
+
+const scriptIndex = args.findIndex(x => x === 'build' || x === 'start' || 'server');
+const script = scriptIndex === -1 ? args[0] : args[scriptIndex];
+const nodeArgs = scriptIndex > 0 ? args.slice(0, scriptIndex) : [];
+
+if (['build', 'start', 'server'].includes(script)) {
+  const result = spawn.sync(
+    process.execPath,
+    nodeArgs.concat(require.resolve(`../ssrConfig/${script}`)).concat(args.slice(scriptIndex + 1)),
+    { stdio: 'inherit' }
+  );
+  if (result.signal) {
+    if (result.signal === 'SIGKILL') {
+      // eslint-disable-next-line no-console
+      console.log(
+        'The build failed because the process exited too early. ' +
+          'This probably means the system ran out of memory or someone called ' +
+          '`kill -9` on the process.'
+      );
+    } else if (result.signal === 'SIGTERM') {
+      // eslint-disable-next-line no-console
+      console.log(
+        'The build failed because the process exited too early. ' +
+          'Someone might have called `kill` or `killall`, or the system could ' +
+          'be shutting down.'
+      );
+    }
+    process.exit(1);
+  }
+  process.exit(result.status);
+} else {
+  // eslint-disable-next-line no-console
+  console.log(`Unknown script "${script}".`);
+}

package/common/appConfig.js

@@ -1,11 +1,11 @@
-const { getProjectPath } = require('./utils');
-
-const configPath = getProjectPath('/config/app.config.js');
-
-const config = require(configPath);
-
-module.exports = {
-  startDefaultPort: 3030,
-  startEntry: '/src/index.tsx',
-  ...config
-};
+const { getProjectPath } = require('./utils');
+
+const configPath = getProjectPath('/config/app.config.js');
+
+const config = require(configPath);
+
+module.exports = {
+  startDefaultPort: 3030,
+  startEntry: '/src/index.tsx',
+  ...config
+};

package/common/build.js

@@ -1,40 +1,40 @@
-const formatWebpackMessages = require('./formatWebpackMessages');
-
-function runCallback(resolve, reject) {
-  return (err, stats) => {
-    let messages;
-    if (err) {
-      if (!err.message) {
-        return reject(err);
-      }
-      let errMessage = err.message;
-      if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) {
-        errMessage += `\nCompileError: Begins at CSS selector ${err.postcssNode.selector}`;
-      }
-
-      messages = formatWebpackMessages({
-        errors: [errMessage],
-        warnings: []
-      });
-    } else {
-      messages = formatWebpackMessages(stats.toJson({ all: false, warnings: true, errors: true }));
-    }
-    if (messages.errors.length) {
-      if (messages.errors.length > 1) {
-        messages.errors.length = 1;
-      }
-      return reject(new Error(messages.errors.join('\n\n')));
-    }
-
-    const resolveArgs = {
-      stats,
-      previousFileSizes: 1,
-      warnings: messages.warnings
-    };
-    return resolve(resolveArgs);
-  };
-}
-
-module.exports = {
-  runCallback
-};
+const formatWebpackMessages = require('./formatWebpackMessages');
+
+function runCallback(resolve, reject) {
+  return (err, stats) => {
+    let messages;
+    if (err) {
+      if (!err.message) {
+        return reject(err);
+      }
+      let errMessage = err.message;
+      if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) {
+        errMessage += `\nCompileError: Begins at CSS selector ${err.postcssNode.selector}`;
+      }
+
+      messages = formatWebpackMessages({
+        errors: [errMessage],
+        warnings: []
+      });
+    } else {
+      messages = formatWebpackMessages(stats.toJson({ all: false, warnings: true, errors: true }));
+    }
+    if (messages.errors.length) {
+      if (messages.errors.length > 1) {
+        messages.errors.length = 1;
+      }
+      return reject(new Error(messages.errors.join('\n\n')));
+    }
+
+    const resolveArgs = {
+      stats,
+      previousFileSizes: 1,
+      warnings: messages.warnings
+    };
+    return resolve(resolveArgs);
+  };
+}
+
+module.exports = {
+  runCallback
+};

package/common/extendEnv.js

@@ -1,48 +1,49 @@
-const getCurrentVersion = require('./version');
-const appConfig = require('./appConfig');
-
-const CurrentVersion = getCurrentVersion();
-
-function extendEnv(isHotSsrEnv) {
-  const result = {
-    REACT_APP_VERSION: CurrentVersion
-  };
-
-  if (process.env.NODE_ENV === 'production') {
-    return { ...result, ...appConfig.getBuildEnvConfig() };
-  }
-
-  if (isHotSsrEnv) {
-    return { ...result, ...appConfig.getHotSsrEnvConfig() };
-  }
-
-  return { ...result, ...appConfig.getStartEnvConfig() };
-}
-
-const REACT_APP = /^REACT_APP_/i;
-
-function getEnvironmentInfo(isHotSsrEnv) {
-  const raw = Object.keys(process.env)
-    .filter(key => REACT_APP.test(key))
-    .reduce(
-      (env, key) => {
-        env[key] = process.env[key];
-        return env;
-      },
-      {
-        NODE_ENV: process.env.NODE_ENV || 'development',
-        BABEL_ENV: process.env.BABEL_ENV || 'development',
-        ...extendEnv(isHotSsrEnv)
-      }
-    );
-  // DefinePlugin
-  const stringified = {
-    'process.env': Object.keys(raw).reduce((env, key) => {
-      env[key] = JSON.stringify(raw[key]);
-      return env;
-    }, {})
-  };
-  return { raw, stringified, version: CurrentVersion };
-}
-
-module.exports = getEnvironmentInfo;
+const getCurrentVersion = require('./version');
+const { parseArgsToJson } = require('./utils');
+const appConfig = require('./appConfig');
+
+const CurrentVersion = getCurrentVersion();
+
+function extendEnv(isHotSsrEnv) {
+  const result = {
+    REACT_APP_VERSION: CurrentVersion
+  };
+
+  if (process.env.NODE_ENV === 'production') {
+    return { ...result, ...appConfig.getBuildEnvConfig(parseArgsToJson) };
+  }
+
+  if (isHotSsrEnv) {
+    return { ...result, ...appConfig.getHotSsrEnvConfig(parseArgsToJson) };
+  }
+
+  return { ...result, ...appConfig.getStartEnvConfig(parseArgsToJson) };
+}
+
+const REACT_APP = /^REACT_APP_/i;
+
+function getEnvironmentInfo(isHotSsrEnv) {
+  const raw = Object.keys(process.env)
+    .filter(key => REACT_APP.test(key))
+    .reduce(
+      (env, key) => {
+        env[key] = process.env[key];
+        return env;
+      },
+      {
+        NODE_ENV: process.env.NODE_ENV || 'development',
+        BABEL_ENV: process.env.BABEL_ENV || 'development',
+        ...extendEnv(isHotSsrEnv)
+      }
+    );
+  // DefinePlugin
+  const stringified = {
+    'process.env': Object.keys(raw).reduce((env, key) => {
+      env[key] = JSON.stringify(raw[key]);
+      return env;
+    }, {})
+  };
+  return { raw, stringified, version: CurrentVersion };
+}
+
+module.exports = getEnvironmentInfo;