@ecoding/base.build 0.2.0 → 0.2.2

package/README.md

@@ -9,6 +9,7 @@
     mpa: boolean; // 是否是多页
     dll：boolean; // 是否打dll
     micro："main" | "child"; // 微前端主应用或子应用 默认null
+    electron: boolean; // electron 是否是electron
     outputLibrary: string; // micro == child时生效，整个库向外暴露的变量名
     publicPath: string; // client cdn 资源前缀
     outputPath: string; // client build bundle 目录，相对命令执行目录
@@ -19,6 +20,7 @@
     {
         "@alilc/lowcode-engine": "var window.AliLowCodeEngine",
         "@alilc/lowcode-engine-ext": "var window.AliLowCodeEngineExt",
+        "electron": true,
     };
     */
     dev:{
@@ -36,6 +38,20 @@
 }
 ```
 
+## 注意：
+
+内部已经支持了 sass 和 less 配置，默认 less，如果想要使用 sass，还需额外安装：
+
+```bash
+# "node-sass": "^7.0.3",
+# "sass-loader": "^13.1.0",
+
+npm i sass-loader node-sass -D --registry http://r.cnpmjs.org
+# 或
+npm i sass-loader node-sass -D --registry https://registry.npm.taobao.org
+
+```
+
 ## 复杂自定义打包配置
 
 在工程下新建 build.js，return webpack 的配置即可，注意完全按照 webpack 配置规则，框架无做任何干涉
@@ -75,7 +91,7 @@ module.exports = {
     "babel-eslint": "10.1.0",
     "babel-loader": "8.2.5",
     "clean-webpack-plugin": "^4.0.0",
-    "concurrently": "^7.3.0",  // 并行执行node 命令
+    "concurrently": "^7.3.0", // 并行执行node 命令
     "core-js": "3.23.1",
     "cross-env": "7.0.3",
     "css-loader": "6.7.1",
@@ -88,6 +104,7 @@ module.exports = {
     "less-loader": "11.0.0",
     "mini-css-extract-plugin": "2.6.1", // css压缩
     "postcss-loader": "7.0.0", // css向下兼容
+    "rimraf": "^3.0.2",
     "style-loader": "3.3.1", // 编译 style 内联css
     "terser-webpack-plugin": "5.3.3", // js压缩
     "typescript": "4.8.3",

package/libs/externals/index.js

@@ -1,11 +1,14 @@
 const { customConfig } = require("../z-helpers/config");
 
 const getExternals = () => {
-    return {
-        // "@alilc/lowcode-engine": "var window.AliLowCodeEngine",
-        // "@alilc/lowcode-engine-ext": "var window.AliLowCodeEngineExt",
-        ...customConfig.externals
-    };
+    return Object.assign(
+        {
+            // "@alilc/lowcode-engine": "var window.AliLowCodeEngine",
+            // "@alilc/lowcode-engine-ext": "var window.AliLowCodeEngineExt",
+            ...customConfig.externals
+        },
+        customConfig.electron ? { electron: true } : {}
+    );
 };
 
 module.exports = getExternals;

package/libs/module/css-loader/index.js

@@ -7,10 +7,11 @@ const loaders = [
     {
         loader: "css-loader",
         options: {
-            modules: { // enable CSS modules for all files matching /\.module\.\w+$/i.test(filename) and /\.icss\.\w+$/i.test(filename) regexp.
+            modules: {
+                // enable CSS modules for all files matching /\.module\.\w+$/i.test(filename) and /\.icss\.\w+$/i.test(filename) regexp.
                 auto: true,
                 mode: "local",
-                localIdentName: '[name]-[local]--[hash:base64:5]',
+                localIdentName: "[name]-[local]--[hash:base64:5]"
             }
         }
     },
@@ -46,6 +47,18 @@ const getLessRule = () => {
     };
 };
 
+const getSassRule = () => {
+    return {
+        test: /\.scss$/,
+        use: [
+            ...loaders,
+            {
+                loader: "sass-loader"
+            }
+        ]
+    };
+};
+
 const getCssRule = () => {
     return {
         test: /\.css$/,
@@ -55,5 +68,6 @@ const getCssRule = () => {
 
 module.exports = {
     getCssRule,
+    getSassRule,
     getLessRule
 };

package/libs/module/css-loader/ssr.js

@@ -2,10 +2,11 @@ const loaders = [
     {
         loader: "css-loader",
         options: {
-            modules: { // enable CSS modules for all files matching /\.module\.\w+$/i.test(filename) and /\.icss\.\w+$/i.test(filename) regexp.
+            modules: {
+                // enable CSS modules for all files matching /\.module\.\w+$/i.test(filename) and /\.icss\.\w+$/i.test(filename) regexp.
                 auto: true,
                 mode: "local",
-                localIdentName: '[name]-[local]--[hash:base64:5]',
+                localIdentName: "[name]-[local]--[hash:base64:5]",
                 exportOnlyLocals: true
             }
         }
@@ -41,6 +42,18 @@ const getLessRule = () => {
     };
 };
 
+const getSassRule = () => {
+    return {
+        test: /\.scss$/,
+        use: [
+            ...loaders,
+            {
+                loader: "sass-loader"
+            }
+        ]
+    };
+};
+
 const getCssRule = () => {
     return {
         test: /\.css$/,
@@ -50,5 +63,6 @@ const getCssRule = () => {
 
 module.exports = {
     getCssRule,
+    getSassRule,
     getLessRule
 };

package/libs/module/index.js

@@ -1,29 +1,22 @@
-const getTsRule = require('./ts-loader');
-const { getCssRule, getLessRule } = require('./css-loader');
-const getImgRule = require('./img-loader');
-const getSvgRule = require('./svg-loader');
-const getFontRule = require('./font-loader');
+const getTsRule = require("./ts-loader");
+const { getCssRule, getLessRule, getSassRule } = require("./css-loader");
+const getImgRule = require("./img-loader");
+const getSvgRule = require("./svg-loader");
+const getFontRule = require("./font-loader");
 
 const getModule = () => {
     const tsRule = getTsRule();
     const lessRule = getLessRule();
     const cssRule = getCssRule();
+    const sassRule = getSassRule();
     const imgRule = getImgRule();
     const svgRule = getSvgRule();
     const fontRule = getFontRule();
 
     return {
         // noParse:/test.js$/, 不编译正则匹配上的文件
-        rules: [
-            tsRule,
-            lessRule,
-            cssRule,
-            imgRule,
-            svgRule,
-            fontRule
-        ]
-    }
-}
+        rules: [tsRule, lessRule, sassRule, cssRule, imgRule, svgRule, fontRule]
+    };
+};
 
-
-module.exports = getModule;
+module.exports = getModule;

package/libs/module/ssr.js

@@ -1,8 +1,8 @@
 const getImgRule = require("./img-loader");
-const getTsRule = require('./ts-loader/ssr');
+const getTsRule = require("./ts-loader/ssr");
 const getSvgRule = require("./svg-loader");
 const getFontRule = require("./font-loader");
-const { getLessRule, getCssRule } = require("./css-loader/ssr");
+const { getLessRule, getCssRule, getSassRule } = require("./css-loader/ssr");
 
 const getModule = () => {
     const tsRule = getTsRule();
@@ -11,17 +11,11 @@ const getModule = () => {
     const fontRule = getFontRule();
     const cssRule = getCssRule();
     const lessRule = getLessRule();
+    const sassRule = getSassRule();
 
     return {
         // noParse:/test.js$/, 不编译正则匹配上的文件
-        rules: [
-            tsRule,
-            lessRule,
-            cssRule,
-            imgRule,
-            svgRule,
-            fontRule
-        ]
+        rules: [tsRule, lessRule, sassRule, cssRule, imgRule, svgRule, fontRule]
     };
 };
 

package/libs/optimization/spa.js

@@ -29,8 +29,8 @@ const getOptimization = () => {
         // 这里的体积大小时指压缩前的
         obj.splitChunks = {
             chunks: "all", // initial | all | async all 表明了在异步和同步之间共享
-            minSize: 10000, // 生成 chunk 的最小体积（以 bytes 为单位） 不限制
-            maxSize: 500000, // 封装的模块的最小体积 0 不限制
+            minSize: 1000000, // 生成 chunk 的最小体积（以 bytes 为单位） 不限制，想要达到dll效果 这里是关键
+            maxSize: 2000000, // 封装的模块的最小体积 0 不限制
             minRemainingSize: 10000, // 分割后剩下的模块大小 0 不限制
             minChunks: 1, // 模块的最小被引用次数
             maxAsyncRequests: 30, // 异步模块按需加载的最大并行请求数 import('xxx.js').then

package/libs/output/index.js

@@ -38,7 +38,7 @@ const getOutput = () => {
             // library: '[name]', // 整个库向外暴露的变量名
             // libraryTarget: 'var' // 默认
         },
-        customConfig.micro === "child"
+        !customConfig.electron && customConfig.micro === "child"
             ? {
                   library: {
                       name: customConfig.outputLibrary,
@@ -47,7 +47,8 @@ const getOutput = () => {
                   chunkLoadingGlobal: `webpackJsonp_${customConfig.outputLibrary}`,
                   globalObject: "window"
               }
-            : {}
+            : {},
+        customConfig.electron ? { libraryTarget: "commonjs2" } : {}
     );
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ecoding/base.build",
-    "version": "0.2.0",
+    "version": "0.2.2",
     "description": "tpl building",
     "author": "cxc",
     "license": "MIT",
@@ -29,6 +29,7 @@
         "cross-env": "7.0.3",
         "css-loader": "6.7.1",
         "css-minimizer-webpack-plugin": "4.0.0",
+        "eslint": "8.18.0",
         "globby": "^11.0.2",
         "html-webpack-plugin": "5.5.0",
         "inline-chunk-html-plugin": "1.1.1",
@@ -50,5 +51,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "214f9ec730c9f5257a99cab28ebe3ff9af4bb689"
+    "gitHead": "3e1dc18ba738b70dc75d79e88f366cc8d6a3f666"
 }