@ecoding/base.build 0.2.1 → 0.2.3

package/README.md

@@ -38,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 配置规则，框架无做任何干涉
@@ -90,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/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/module/ts-loader/index.js

@@ -1,5 +1,5 @@
 const { rootPath } = require("../../z-helpers/paths");
-
+const { customConfig } = require("../../z-helpers/config");
 const presets = [
     [
         "@babel/preset-env",
@@ -32,29 +32,26 @@ const presets = [
              */
             useBuiltIns: "usage",
             targets: {
-                browsers: [
-                    "last 1 version",
-                    "> 1%",
-                    "IE 10",
-                    "iOS >=6",
-                    "Android >=4"
-                ]
+                browsers: ["last 1 version", "> 1%", "IE 10", "iOS >=6", "Android >=4"]
             },
             // 如果设为true，则会编译 es6Module 语法，则会失去tree-shaking
             modules: false,
-            corejs: 3,
+            corejs: customConfig.corejs || 3,
             // 需要忽略的预编译包
             exclude: [
                 // 没使用Symbol,不需要_typeof方法兼容Symbol
-                'transform-typeof-symbol'
+                "transform-typeof-symbol"
             ]
         }
     ],
-    ["@babel/preset-react", {
-        // automatic 自动模式 不需要引入 import React form 'react';
-        // classic 经典模式 需要引入 import React form 'react';
-        runtime: 'classic',
-    }],
+    [
+        "@babel/preset-react",
+        {
+            // automatic 自动模式 不需要引入 import React form 'react';
+            // classic 经典模式 需要引入 import React form 'react';
+            runtime: "classic"
+        }
+    ],
     ["@babel/preset-typescript"]
 ].filter(Boolean);
 
@@ -67,13 +64,13 @@ const plugins = [
 ].filter(Boolean);
 
 const babelLoader = {
-    loader: 'babel-loader',
+    loader: "babel-loader",
     options: {
         presets,
         plugins,
         cacheDirectory: true
     }
-}
+};
 
 const getTsRule = () => {
     return {

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

@@ -1,5 +1,5 @@
 const { rootPath } = require("../../z-helpers/paths");
-
+const { customConfig } = require("../../z-helpers/config");
 const presets = [
     [
         "@babel/preset-env",
@@ -34,19 +34,22 @@ const presets = [
             targets: "node 14.0",
             // 如果设为true，则会编译 es6Module 语法，则会失去tree-shaking
             modules: false,
-            corejs: 3,
+            corejs: customConfig.corejs || 3,
             // 需要忽略的预编译包
             exclude: [
                 // 没使用Symbol,不需要_typeof方法兼容Symbol
-                'transform-typeof-symbol'
+                "transform-typeof-symbol"
             ]
         }
     ],
-    ["@babel/preset-react", {
-        // automatic 自动模式 不需要引入 import React form 'react'; 对应tsconfig.json jsx: react-jsx
-        // classic 经典模式 需要引入 import React form 'react'; 对应tsconfig.json jsx: react
-        runtime: 'classic',
-    }],
+    [
+        "@babel/preset-react",
+        {
+            // automatic 自动模式 不需要引入 import React form 'react'; 对应tsconfig.json jsx: react-jsx
+            // classic 经典模式 需要引入 import React form 'react'; 对应tsconfig.json jsx: react
+            runtime: "classic"
+        }
+    ],
     ["@babel/preset-typescript"]
 ].filter(Boolean);
 
@@ -59,13 +62,13 @@ const presets = [
 // ].filter(Boolean);
 
 const babelLoader = {
-    loader: 'babel-loader',
+    loader: "babel-loader",
     options: {
         presets,
         // plugins,
         cacheDirectory: true
     }
-}
+};
 
 const getTsRule = () => {
     return {

package/libs/optimization/spa.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ecoding/base.build",
-    "version": "0.2.1",
+    "version": "0.2.3",
     "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": "98edfa407d94f9358bc7d1275634bcb0d79a0c01"
+    "gitHead": "adaea9603610921a2c9c356c9c0ca765320396eb"
 }