@autobest-ui/scripts 3.0.0-alpha.0 → 3.0.0-alpha.1

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/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默认配置

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,6 +1,6 @@
 {
   "name": "@autobest-ui/scripts",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0-alpha.1",
   "private": false,
   "description": "utils for project tools",
   "bin": {
@@ -98,9 +98,5 @@
     "webpack-merge": "5.8.0",
     "webpack-node-externals": "3.0.0"
   },
-  "peerDependencies": {
-    "eslint": "^8.23.1",
-    "typescript": "4.8.3"
-  },
   "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'),
+        entry: 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'),
+        entry: 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)$/
-      })
+      }
     }
   );