@ecoding/base.build 0.0.12 → 0.0.13

package/libs/entries/ssr.js

@@ -6,7 +6,7 @@ const getEntries = () => {
         return ssrEntry.pagesObj;
     }
     return {
-        app: rootPath("./src/app.tsx")
+        app: rootPath("./src/server-render.tsx")
     };
 };
 

package/libs/module/ssr.js

@@ -1,10 +1,11 @@
 const getImgRule = require("./img-loader");
+const getTsRule = require('./ts-loader/ssr');
 const getSvgRule = require("./svg-loader");
 const getFontRule = require("./font-loader");
 const { getLessRule, getCssRule } = require("./css-loader/ssr");
-const { rootPath } = require("../z-helpers/paths");
 
 const getModule = () => {
+    const tsRule = getTsRule();
     const imgRule = getImgRule();
     const svgRule = getSvgRule();
     const fontRule = getFontRule();
@@ -14,12 +15,7 @@ const getModule = () => {
     return {
         // noParse:/test.js$/, 不编译正则匹配上的文件
         rules: [
-            {
-                test: /\.(tsx?|jsx?)$/, // js ts 都走一遍 ts 进行编译
-                use: "ts-loader",
-                exclude: /node_modules/,
-                include: [rootPath("src"), /\/node_modules\/@ecoding.*/],
-            },
+            tsRule,
             lessRule,
             cssRule,
             imgRule,

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

@@ -1,5 +1,79 @@
 const { rootPath } = require("../../z-helpers/paths");
-const babelLoader = require("./babel");
+
+const presets = [
+    [
+        "@babel/preset-env",
+        {
+            ignoreBrowserslistConfig: true,
+
+            /**
+             * false 当我们使用preset-env传入useBuiltIns参数时候，默认为false。
+             * 它表示仅仅会转化最新的ES语法，并不会转化任何Api和方法。就是关闭垫片
+             * 
+             * 当传入entry时，需要我们在项目入口文件中手动引入一次core-js，
+             * 它会根据我们配置的浏览器兼容性列表(browserList)然后全量引入不兼容的polyfill。
+             * 项目入口文件中需要额外引入polyfill
+                // core-js 2.0中是使用"@babel/polyfill" core-js3.0版本中变化成为了上边两个包
+                import "@babel/polyfill" // core-js 2.0
+
+                import "core-js/stable" // core-js3.0
+                import "regenerator-runtime/runtime" // core-js3.0
+
+                // babel
+                {
+                    "presets": [
+                        ["@babel/preset-env", {
+                            "useBuiltIns": "entry"
+                        }]
+                    ]
+                }
+
+             *  usage时，会根据配置的浏览器兼容，以及代码中 使用到的Api 进行引入polyfill按需添加。  
+             */
+            useBuiltIns: "usage",
+            targets: {
+                browsers: [
+                    "last 1 version",
+                    "> 1%",
+                    "IE 10",
+                    "iOS >=6",
+                    "Android >=4"
+                ]
+            },
+            // 如果设为true，则会编译 es6Module 语法，则会失去tree-shaking
+            modules: false,
+            corejs: 3,
+            // 需要忽略的预编译包
+            exclude: [
+                // 没使用Symbol,不需要_typeof方法兼容Symbol
+                'transform-typeof-symbol'
+            ]
+        }
+    ],
+    ["@babel/preset-react", {
+        // automatic 自动模式 不需要引入 import React form 'react';
+        // classic 经典模式 需要引入 import React form 'react';
+        runtime: 'classic',
+    }],
+    ["@babel/preset-typescript"]
+].filter(Boolean);
+
+const plugins = [
+    ["@babel/plugin-transform-runtime", { corejs: false }],
+    ["@babel/plugin-proposal-decorators", { legacy: true }],
+    ["@babel/plugin-proposal-class-properties", { loose: true }],
+    ["@babel/plugin-proposal-private-methods", { loose: true }],
+    ["@babel/plugin-proposal-private-property-in-object", { loose: true }]
+].filter(Boolean);
+
+const babelLoader = {
+    loader: 'babel-loader',
+    options: {
+        presets,
+        plugins,
+        cacheDirectory: true
+    }
+}
 
 const getTsRule = () => {
     return {

package/libs/module/ts-loader/{babel.js → ssr.js}

@@ -1,3 +1,5 @@
+const { rootPath } = require("../../z-helpers/paths");
+
 const presets = [
     [
         "@babel/preset-env",
@@ -29,15 +31,7 @@ const presets = [
              *  usage时，会根据配置的浏览器兼容，以及代码中 使用到的Api 进行引入polyfill按需添加。  
              */
             useBuiltIns: "usage",
-            targets: {
-                browsers: [
-                    "last 1 version",
-                    "> 1%",
-                    "IE 10",
-                    "iOS >=6",
-                    "Android >=4"
-                ]
-            },
+            targets: "node 14.0",
             // 如果设为true，则会编译 es6Module 语法，则会失去tree-shaking
             modules: false,
             corejs: 3,
@@ -49,27 +43,40 @@ const presets = [
         }
     ],
     ["@babel/preset-react", {
-        // automatic 自动模式 不需要引入 import React form 'react';
-        // classic 经典模式 需要引入 import React form '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);
 
-const plugins = [
-    ["@babel/plugin-transform-runtime", { corejs: false }],
-    ["@babel/plugin-proposal-decorators", { legacy: true }],
-    ["@babel/plugin-proposal-class-properties", { loose: true }],
-    ["@babel/plugin-proposal-private-methods", { loose: true }],
-    ["@babel/plugin-proposal-private-property-in-object", { loose: true }]
-].filter(Boolean);
+// const plugins = [
+//     ["@babel/plugin-transform-runtime", { corejs: false }],
+//     ["@babel/plugin-proposal-decorators", { legacy: true }],
+//     ["@babel/plugin-proposal-class-properties", { loose: true }],
+//     ["@babel/plugin-proposal-private-methods", { loose: true }],
+//     ["@babel/plugin-proposal-private-property-in-object", { loose: true }]
+// ].filter(Boolean);
 
 const babelLoader = {
     loader: 'babel-loader',
     options: {
         presets,
-        plugins,
+        // plugins,
         cacheDirectory: true
     }
 }
-module.exports = babelLoader;
+
+const getTsRule = () => {
+    return {
+        test: /\.(tsx?|jsx?)$/,
+        use: [babelLoader],
+        // 指定要编译的路径
+        include: [rootPath("src"), /\/node_modules\/@ecoding.*/],
+
+        // 忽略要编译的路径
+        exclude: [/node_modules/]
+    };
+};
+
+module.exports = getTsRule;

package/libs/output/ssr.js

@@ -14,7 +14,7 @@ const pubPath = () => {
 const getOutput = () => {
     return Object.assign({
         // 输出文件目录（将来所有资源输出的公共目录）
-        path: rootPath(customConfig.outputPath || "./dist"),
+        path: rootPath(customConfig.outputPath || "../../src/ssr"),
 
         /**
              * 所有资源引入公共路径前缀 --> 'imgs/a.jpg' --> '/imgs/a.jpg'
@@ -26,7 +26,7 @@ const getOutput = () => {
         publicPath: pubPath(),
 
         // 入口代码块文件名称（指定名称+目录）
-        filename: "[name].server-entry.js",
+        filename: "[name].server-render.js",
         libraryTarget: "commonjs2"
     });
 };

package/libs/z-helpers/mpa.entries.js

@@ -21,3 +21,20 @@ exports.getMPAEntries = () => {
     return entry;
 };
 
+exports.getSSRMPAEntries = () => {
+    if (entry) {
+        return entry;
+    }
+    const filename = "server-render.tsx";
+    const dirPath = rootPath("./src/pages");
+    const pages = fs.readdirSync(dirPath);
+    const pagesObj = {};
+    pages.forEach((pageName) => {
+        pagesObj[pageName] = rootPath(`./src/pages/${pageName}/${filename}`);
+    });
+    entry = {
+        pagesObj,
+        pages
+    };
+    return entry;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ecoding/base.build",
-    "version": "0.0.12",
+    "version": "0.0.13",
     "description": "tpl building",
     "author": "cxc",
     "license": "MIT",
@@ -53,5 +53,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "247243b7d008258a17064708b1abb15dcd361830"
+    "gitHead": "e95d9c3fa16848e2190709e30917b918935a366b"
 }