@autobest-ui/scripts 1.9.4 → 2.0.0

package/README.md

@@ -1,135 +1,4 @@
 # @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 }
-) {
-   // 根据条件，对不同环境的配置进行扩展
-   ......
-   // 最终返回扩展后的结果
-   return result;
-}
-```
-
-#### app.config.js 介绍
-
-##### start 配置参数说明(作用于`react-spa start` 或者 `react-ssr start`)
-|  参数名   | 默认值  | 说明                                |
-|  ----  |------|-----------------------------------|
-| startDefaultPort | 3030 | start默认端口号， 可自定义，下面介绍             |
-| startOpenPath  | '/'  | start 打开浏览器的路径                    |
-| getStartEnvConfig  | {}   | start 自定义环境变量的方法，会追加到process.env中 |
-| devServer  | {}   | start 自定义devServer配置       |
-
-##### hot ssr 配置参数说明(作用于`react-ssr ssr`)
-|  参数名  | 默认值                            | 说明  |
-|  ---- |--------------------------------| ----  |
-| hotSsrDefaultPort  | 9090                           | hot ssr默认端口号， 可自定义，下面介绍       |
-| hotSsrOpenPath  | '/'                            | hot ssr 打开浏览器的路径              |
-| hotSsrRunPath  | 'server/app.ts'                | hot ssr 执行nodejs 入口文件路径       |
-| hotSsrWatch  |['devPublic', 'devBuild', 'server']|  hot ssr 需要watch的文件夹，类型： Array |
-| getHotSsrEnvConfig | {}                             | hot ssr 自定义环境变量的方法，会追加到process.env中 |
-
-##### build ssr 配置参数说明(作用于`react-ssr build`)
-|  参数名  | 默认值                   | 说明  |
-|  ----  |-----------------------| ----  |
-| getBuildEnvConfig  | {}                    | build ssr 自定义环境变量的方法，会追加到process.env中 |
-| buildClientLoadableConfig.filename | 'loadable-stats.json' | build ssr 自定义按需加载路径存储库文件名             |
-| buildClientLoadableConfig.writeToDiskFilename  | '/build'              | build ssr 自定义按需加载路径存储库文件存放位置 |
-
-##### 公共配置
-| 参数名     | 默认值  | 说明   |
-|----------|------|------|
-| htmlPluginTemplate | '/index.html' | client端，模板html路径                   |
-| htmlPluginFavicon  | undefined |  client端，favicon.ico路径，也可以通过nginx配置 |
-| baseStaticMediaPath  | static |  静态资源图片等基础文件夹 |
-| baseStaticCssPath  | css  |  静态资源css基础文件夹 |
-| baseStaticJsPath  | js   |  静态资源js基础文件夹 |
-
-## 自定义
-
-#### 系统支持的运行参数
-| 参数名                 | 默认值               | 说明                                                             |
-|---------------------|-------------------|----------------------------------------------------------------|
-| --port 3031         | startDefaultPort值 | 覆盖默认端口号 `react-spa start --port 3031`                          |
-| --eslint            | false             | 运行时是否启动语法检查 `react-spa start --eslint`，`build`情况下该参数失效，不执行语法检查 |
-
-#### 自定义其他参数
-**例如：**
-- `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`
-
-#### 背景图片问题
-推荐把静态资源放到静态库，并使用sass环境变量`$env`进行本地调试，若想使用本地文件，需特殊处理。
-
-- scss环境变量
-```scss
-// 其中 $env = process.env.NODE_ENV， 满足background-image链接不全、区分本地与线上样式等需求。
-if($env == 'development','为true的样式', ‘为false的样式’）
-// 例子
-$AssetBaseUrl: 'https://assets-web.dev.autobestdevops.com';
-$AssetCommonPath: '/common-uiasset';
-$AssetWwwPath: '/www-uiasset';
-
-@mixin getBgImgFromCommon($url) {
-  background-image: if($env == 'development', url($AssetBaseUrl + $AssetCommonPath + $url), url($AssetCommonPath + $url));
-}
-
-@mixin getBgImgFromWww($url) {
-  background-image: if($env == 'development', url($AssetBaseUrl + $AssetWwwPath + $url), url($AssetWwwPath + $url));
-}
-```
-
-- 使用本地文件注意事项
-```scss
-// background image 不解析以"http、https"开头或者/common-uiasset/|/wwwasset/|/onlineasset/开头的静态资源， 例如：'/common-uiasset/img.png'
-// 所以本地静态资源需要特别注意，不能创建/common-uiasset/|/wwwasset/|/onlineasset/文件夹
-.live-chat {
-  background: url('imgs/图片名.resolving.png') 0 center no-repeat;
-}
-```
+`npm install @autobest-ui/scripts --save-dev`

package/apiConfig/build.js

@@ -0,0 +1,64 @@
+const webpack = require('webpack');
+const chalk = require('chalk');
+const appConfig = require('../common/appConfig');
+const { runCallback } = require('../common/build');
+const getEnvironmentInfo = require('../common/extendEnv');
+const extendWebpackConfigFromProject = require('../common/extendWebpackConfigFromProject');
+const apiConfigFactory = require('./webpack.prod.api');
+
+process.env.BABEL_ENV = 'production';
+process.env.NODE_ENV = 'production';
+
+process.on('unhandledRejection', err => {
+  // eslint-disable-next-line @typescript-eslint/no-throw-literal
+  throw err;
+});
+
+const extendEnv = getEnvironmentInfo();
+
+function build() {
+  const apiConfig = extendWebpackConfigFromProject(apiConfigFactory, appConfig, extendEnv, {
+    isServer: true,
+    isHotServer: false,
+    isProd: true
+  });
+  // eslint-disable-next-line no-console
+  console.log(chalk.green('Creating an optimized production build...'));
+  const apiCompiler = webpack(apiConfig);
+  return new Promise((resolve, reject) => {
+    apiCompiler.run(runCallback(resolve, reject));
+  });
+}
+
+build()
+  .then(
+    buildInfo => {
+      if (buildInfo.warnings.length) {
+        // eslint-disable-next-line no-console
+        console.log(chalk.yellow('Compiled with warnings.\n'));
+        // eslint-disable-next-line no-console
+        console.log(buildInfo.warnings.join('\n\n'));
+        // eslint-disable-next-line no-console
+        console.log(`\nSearch for the ${chalk.underline(chalk.yellow('keywords'))} to learn more about each warning.`);
+        // eslint-disable-next-line no-console
+        console.log(`To ignore, add ${chalk.cyan('// eslint-disable-next-line')} to the line before.\n`);
+      } else {
+        // eslint-disable-next-line no-console
+        console.log(chalk.green('Compiled successfully.\n'));
+      }
+    },
+    err => {
+      // eslint-disable-next-line no-console
+      console.log(chalk.red('Failed to compile.\n'));
+      // eslint-disable-next-line no-console
+      console.log(err);
+      process.exit(1);
+    }
+  )
+  .catch(err => {
+    // eslint-disable-next-line no-console
+    console.log(chalk.red('Failed to compile.\n'));
+    // eslint-disable-next-line no-console
+    console.log(err);
+    process.exit(1);
+  });

package/apiConfig/start.js

@@ -0,0 +1,54 @@
+const nodemon = require('nodemon');
+const open = require('open');
+const getEnvironmentInfo = require('../common/extendEnv');
+const appConfig = require('../common/appConfig');
+const { getProjectPath, parseArgsToJson } = require('../common/utils');
+
+const extendEnv = getEnvironmentInfo();
+
+const PORT = process.env.PORT || parseArgsToJson.port || appConfig.startDefaultPort;
+const startOpenPath = appConfig.startOpenPath ? appConfig.startOpenPath : '';
+
+process.env.BABEL_ENV = 'development';
+process.env.NODE_ENV = 'development';
+
+const options = {
+  // 配置文件
+  script: getProjectPath(appConfig.apiEntry),
+  restartable: 're',
+  verbose: true,
+  delay: 1000,
+  watch: appConfig.hotApiWatch,
+  env: {
+    PORT: PORT,
+    BABEL_ENV: 'development',
+    NODE_ENV: 'development',
+    ...extendEnv.raw
+  }
+};
+
+let isOpened = false;
+
+nodemon(options)
+  .on('start', () => {
+    // 启动时的事件
+    // eslint-disable-next-line no-console
+    console.log('Server app has started');
+    if (startOpenPath && !isOpened) {
+      setTimeout(() => {
+        open(`http://localhost:${PORT}${startOpenPath}`);
+      }, 3000);
+      isOpened = true;
+    }
+  })
+  .on('quit', () => {
+    // 退出时的事件
+    // eslint-disable-next-line no-console
+    console.log('Server app has quit');
+    process.exit();
+  })
+  .on('restart', () => {
+    // 重启时的事件
+    // eslint-disable-next-line no-console
+    console.log('Server app has restarted');
+  });

package/apiConfig/webpack.prod.api.js

@@ -0,0 +1,38 @@
+const { merge } = require('webpack-merge');
+const { getProjectPath, deleteFolders } = require('../common/utils');
+const webpackCommon = require('../common/webpack.common');
+
+module.exports = function (appConfig, extendEnv, { isServer, isHotServer, isProd }) {
+  const result = merge(webpackCommon(appConfig, extendEnv, { isProd, isServer, isHotServer }), {
+    target: 'node',
+    entry: getProjectPath(appConfig.apiEntry),
+    output: {
+      path: getProjectPath(appConfig.apiOutputPath),
+      publicPath: '/',
+      filename: 'index.js',
+      libraryTarget: 'commonjs2',
+      chunkFilename: '[name].[chunkhash].js'
+    },
+    module: {
+      rules: [
+        {
+          oneOf: [
+            {
+              test: /\.(scss|css|sass)$/,
+              use: [
+                {
+                  loader: require.resolve('ignore-loader')
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  });
+
+  const buildServerOutput = getProjectPath(result.output.path);
+  deleteFolders(buildServerOutput);
+
+  return result;
+};

package/bin/api.js

@@ -0,0 +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(`../apiConfig/${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

@@ -9,7 +9,7 @@ const spawn = require('cross-spawn');
 
 const args = process.argv.slice(2);
 
-const scriptIndex = args.findIndex(x => x === 'build' || x === 'start' || 'server');
+const scriptIndex = args.findIndex(x => x === 'build' || x === 'start' || x === 'server');
 const script = scriptIndex === -1 ? args[0] : args[scriptIndex];
 const nodeArgs = scriptIndex > 0 ? args.slice(0, scriptIndex) : [];
 

package/common/appConfig.js

@@ -28,11 +28,20 @@ const defaultConfig = {
   getStartEnvConfig: () => ({}),
   devServer: {},
 
+  clientEntryAtSpa: '/src/index.tsx',
+  clientOutputPathAtSpa: '/build',
+
+  clientEntryAtSsr: '/src/client-entry.tsx',
+  clientOutputPathAtSsr: '/build',
+
+  serverEntryAtSsr: '/server/index.ts',
+  serverOutputPathAtSsr: '/dist',
+
   // hot ssr默认配置
   hotSsrDefaultPort: 9090,
   hotSsrOpenPath: '/',
-  hotSsrRunPath: 'server/app.ts',
-  hotSsrWatch: ['devPublic', 'devBuild', 'server'],
+  hotSsrRunPath: '/dist/index.js',
+  hotSsrWatch: ['build', 'dist'],
   getHotSsrEnvConfig: () => ({}),
 
   // build默认配置
@@ -49,7 +58,12 @@ const defaultConfig = {
   // 静态资源css基础文件夹
   baseStaticCssPath: 'css',
   // 静态资源js基础文件夹
-  baseStaticJsPath: 'js'
+  baseStaticJsPath: 'js',
+
+  // API 配置
+  apiEntry: '/src/index.ts',
+  apiOutputPath: '/build',
+  hotApiWatch: ['src']
 };
 
 module.exports = {

package/common/webpack.common.js

@@ -213,7 +213,6 @@ module.exports = (appConfig, extendEnv, { isProd, isServer, isHotServer }) => {
       extensions: ['.tsx', '.ts', '.js', 'scss', 'css']
     },
     plugins: [
-      new webpack.DefinePlugin(extendEnv.stringified),
       new ProgressBarPlugin({
         // eslint-disable-next-line no-useless-concat
         format: 'build [:bar] ' + ':percent' + ' (:elapsed seconds)',
@@ -243,6 +242,10 @@ module.exports = (appConfig, extendEnv, { isProd, isServer, isHotServer }) => {
     );
   }
 
+  if (!isServer) {
+    result.plugins.push(new webpack.DefinePlugin(extendEnv.stringified));
+  }
+
   if (isProd && !isServer) {
     result.optimization = {
       chunkIds: 'named',

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@autobest-ui/scripts",
-  "version": "1.9.4",
+  "version": "2.0.0",
   "private": false,
   "description": "utils for project tools",
   "bin": {
     "react-spa": "./bin/spa.js",
-    "react-ssr": "./bin/ssr.js"
+    "react-ssr": "./bin/ssr.js",
+    "node-api": "./bin/api.js"
   },
   "scripts": {
     "clean": "rimraf lib esm",
@@ -21,6 +22,7 @@
     "bin",
     "spaConfig",
     "ssrConfig",
+    "apiConfig",
     "common"
   ],
   "keywords": [
@@ -62,7 +64,7 @@
     "@babel/preset-react": "7.18.6",
     "@babel/preset-typescript": "7.18.6",
     "@babel/runtime": "7.20.1",
-    "@loadable/babel-plugin": "5.15.3",
+    "@loadable/babel-plugin": "5.13.2",
     "@loadable/webpack-plugin": "5.15.2",
     "@soda/friendly-errors-webpack-plugin": "1.8.1",
     "babel-loader": "8.2.4",
@@ -98,9 +100,5 @@
     "webpack-merge": "5.8.0",
     "webpack-node-externals": "3.0.0"
   },
-  "peerDependencies": {
-    "eslint": "^8.23.1",
-    "typescript": "4.8.3"
-  },
-  "gitHead": "2611548b4427c16fb03f9437ab20889615441a95"
+  "gitHead": "fb75bd54150164e95c075eef437badba8dcd0728"
 }

package/spaConfig/webpack.dev.js

@@ -8,10 +8,10 @@ const HOST = process.env.HOST || ip.address() || 'localhost';
 
 module.exports = function (appConfig, extendEnv) {
   return merge(baseConfig(false, appConfig, extendEnv), {
-    entry: getProjectPath('/src/index.tsx'),
+    entry: getProjectPath(appConfig.clientEntryAtSpa),
     output: {
       publicPath: '/',
-      path: getProjectPath('/dist'),
+      path: getProjectPath(appConfig.clientOutputPathAtSpa),
       pathinfo: true,
       filename: '[name].js',
       chunkFilename: '[name].chunk.js'

package/spaConfig/webpack.prod.js

@@ -7,11 +7,11 @@ const baseConfig = require('./webpack.base');
 module.exports = function (appConfig, extendEnv) {
   const result = merge(baseConfig(true, appConfig, extendEnv), {
     // 打包的入口文件
-    entry: getProjectPath('/src/index.tsx'),
+    entry: getProjectPath(appConfig.clientEntryAtSpa),
     // 打包的出口
     output: {
       publicPath: '/',
-      path: getProjectPath('/build'),
+      path: getProjectPath(appConfig.clientOutputPathAtSpa),
       // 入口文件生产的js
       filename: `${appConfig.baseStaticJsPath}/[name].chunk.js?v=${extendEnv.version}`,
       // 非入口文件生产的js

package/ssrConfig/webpack.dev.client.js

@@ -12,7 +12,7 @@ module.exports = function (appConfig, extendEnv, { isServer, isHotServer, isProd
     }),
     {
       // 入口文件
-      entry: getProjectPath('/src/client-entry.tsx'),
+      entry: getProjectPath(appConfig.clientEntryAtSsr),
       resolve: {
         fallback: {
           fs: false
@@ -21,7 +21,7 @@ module.exports = function (appConfig, extendEnv, { isServer, isHotServer, isProd
       // 输出信息
       output: {
         // 输出文件路径
-        path: getProjectPath('/devPublic'),
+        path: getProjectPath(appConfig.clientOutputPathAtSsr),
         publicPath: '/',
         filename: `${appConfig.baseStaticJsPath}/[name].js`,
         chunkFilename: `${appConfig.baseStaticJsPath}/[name].js`

package/ssrConfig/webpack.dev.js

@@ -15,10 +15,10 @@ module.exports = function (appConfig, extendEnv, { isServer, isHotServer, isProd
       isProd
     }),
     {
-      entry: getProjectPath('/src/index.tsx'),
+      entry: getProjectPath(appConfig.clientEntryAtSpa),
       output: {
         publicPath: '/',
-        path: getProjectPath('/dist'),
+        path: getProjectPath(appConfig.clientOutputPathAtSpa),
         pathinfo: true,
         filename: '[name].js',
         chunkFilename: '[name].chunk.js'

package/ssrConfig/webpack.dev.server.js

@@ -20,13 +20,13 @@ module.exports = function (appConfig, extendEnv, { isServer, isHotServer, isProd
         allowlist: /\.(js|css|less|scss|png|jpg|jpeg)$/
       }),
       // 入口文件
-      entry: getProjectPath('/src/serverEntry/index.tsx'),
+      entry: getProjectPath(appConfig.serverEntryAtSsr),
       // 输出信息
       output: {
-        path: getProjectPath('/devBuild'),
+        path: getProjectPath(appConfig.serverOutputPathAtSsr),
         publicPath: '/',
         // 输出文件名
-        filename: 'bundle.js',
+        filename: 'index.js',
         libraryTarget: 'commonjs2'
       },
       module: {

package/ssrConfig/webpack.prod.client.js

@@ -13,10 +13,10 @@ module.exports = function (appConfig, extendEnv, { isServer, isHotServer, isProd
       isProd
     }),
     {
-      entry: getProjectPath('/src/client-entry.tsx'),
+      entry: getProjectPath(appConfig.clientEntryAtSsr),
       // 打包的出口
       output: {
-        path: getProjectPath('/build'),
+        path: getProjectPath(appConfig.clientOutputPathAtSsr),
         publicPath: '/',
         // 入口文件生产的js
         filename: `${appConfig.baseStaticJsPath}/[name].js?v=${extendEnv.version}`,

package/ssrConfig/webpack.prod.server.js

@@ -1,4 +1,3 @@
-const nodeExternals = require('webpack-node-externals');
 const { merge } = require('webpack-merge');
 const { getProjectPath, deleteFolders } = require('../common/utils');
 const baseConfig = require('./webpack.base');
@@ -12,11 +11,11 @@ module.exports = function (appConfig, extendEnv, { isServer, isHotServer, isProd
     }),
     {
       target: 'node',
-      entry: getProjectPath('/src/serverEntry/index.tsx'),
+      entry: getProjectPath(appConfig.serverEntryAtSsr),
       output: {
-        path: getProjectPath('/build'),
+        path: getProjectPath(appConfig.serverOutputPathAtSsr),
         publicPath: '/',
-        filename: 'server-bundle.js',
+        filename: 'index.js',
         libraryTarget: 'commonjs2',
         chunkFilename: `${appConfig.baseStaticJsPath}/[name].[chunkhash].js`
       },
@@ -35,12 +34,7 @@ module.exports = function (appConfig, extendEnv, { isServer, isHotServer, isProd
             ]
           }
         ]
-      },
-      // 服务端打包的时候忽略外部的npm包
-      externals: nodeExternals({
-        // 当然外部的css还是可以打进来的
-        allowlist: /\.(css|less|scss)$/
-      })
+      }
     }
   );