@autobest-ui/scripts 1.1.0 → 1.2.0

package/README.md

@@ -118,3 +118,33 @@ module.exports = function(
 该方式，主要应用于启动程序前，自定义环境变量，主要用于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;
+}
+```

package/common/start.js

@@ -45,14 +45,23 @@ function openStartRun(webpackFactory) {
     const config = webpackFactory({ ...appConfig, port: PORT, startOpenPath }, extendEnv);
     const compiler = webpack(config);
     const server = new WebpackDevServer(options, compiler);
+    let hasOpenBrowser = false;
+
+    // 添加钩子函数，弹出浏览器
+    compiler.hooks.done.tap('OpenBrowser', () => {
+      if (!hasOpenBrowser) {
+        hasOpenBrowser = true;
+        setTimeout(() => {
+          open(`http://localhost:${PORT}${startOpenPath}`);
+        }, 600);
+      }
+    });
 
     server.startCallback(err => {
       if (err) {
         // eslint-disable-next-line no-console
         console.log(err);
-        return;
       }
-      open(`http://localhost:${PORT}${startOpenPath}`);
     });
     ['SIGINT', 'SIGTERM'].forEach(sig => {
       process.on(sig, () => {

package/common/webpack.common.js

@@ -8,7 +8,8 @@ const appWebpackConfigPath = getProjectPath('/config/app.webpack.js');
 
 const sassRegex = /\.(scss|sass)$/;
 const sassModuleRegex = /\.module\.(scss|sass)$/;
-const imageResolvingRegex = /\.resolving\.(png|jpg|jepg|gif)$/;
+const imageNotResolvingRegex = /^\/(common-uiasset|wwwasset|onlineasset)\//;
+const httpRegex = /^https?:\/\//;
 
 function getStyleLoaders({ isProd, isServer, isHotServer, isSass, moduleOption = {} }) {
   const result = [
@@ -17,8 +18,8 @@ function getStyleLoaders({ isProd, isServer, isHotServer, isSass, moduleOption =
       options: {
         ...moduleOption,
         url: {
-          // background image只解析以".resolving."结尾的静态资源， 例如：'img.resolving.png'
-          filter: url => imageResolvingRegex.test(url)
+          // background image不解析以"http、https"开头或者/common-uiasset/|/wwwasset/|/onlineasset/开头的静态资源， 例如：'/common-uiasset/img.png'
+          filter: url => !httpRegex.test(url) && !imageNotResolvingRegex.test(url)
         }
       }
     },
@@ -56,7 +57,7 @@ function getStyleLoaders({ isProd, isServer, isHotServer, isSass, moduleOption =
         loader: require.resolve('sass-loader'),
         options: {
           // 增加环境变量，供sass使用
-          additionalData: `$env: ${process.env.NODE_ENV};`
+          additionalData: `$env: ${isProd ? 'production' : 'development'};`
         }
       }
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobest-ui/scripts",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": false,
   "description": "utils for project tools",
   "bin": {
@@ -92,5 +92,5 @@
     "webpack-merge": "5.8.0",
     "webpack-node-externals": "3.0.0"
   },
-  "gitHead": "54fc1daf543e5e91f26409cf62e1a9edec3e4196"
+  "gitHead": "fb75bd54150164e95c075eef437badba8dcd0728"
 }