@varlet/cli 1.23.4-alpha.1 → 1.23.4-alpha.16

package/README.en-US.md

@@ -55,6 +55,32 @@ The `varlet.config.js` in the project root directory is used to manage the speci
 | `analysis` | Document statistics related | _SiteAnalysis_ | `-` |
 | `pc` | PC-side document structure configuration | _SitePC_ | `-` |
 | `mobile` | Mobile document structure configuration | _SiteMobile_ | `-` |
+| `moduleCompatible` | Module compatible config | _Record<string, string>_ | `-` |
+
+#### Module Compatible
+
+Some external dependencies may need to be compatible with module syntax to achieve the purpose of compiling correctly to `commonjs` and `esmodule`. For example, the wording of `esmodule` of `dayjs` is
+
+```js
+import dayjs from 'dayjs/esm'
+```
+
+In order to build `commonjs`, the writing method is
+
+```js
+import * as dayjs from 'dayjs'
+```
+
+In the project, we embrace the first way of writing the `esmodule` module, and make the following configuration for adaptation
+
+```js
+// varlet.config.js
+module.exports = {
+  moduleCompatible: {
+    "import dayjs from 'dayjs/esm'\n": "import * as dayjs from 'dayjs'\n"
+  }
+}
+```
 
 #### SiteThemes
 
@@ -93,7 +119,7 @@ Code snippets are highlighted, based on [highlight.js](https://highlightjs.org/)
 
 | Parameter | Description | Type | Default |
 | ----- | -------------- | -------- | ---------- |
-| `style` | highlight的css地址 | _string_ | `-` |
+| `style` | highlight css link | _string_ | `-` |
 
 #### SiteAnalysis
 
@@ -101,7 +127,7 @@ Statistics related to buried points
 
 | Parameter | Description | Type | Default |
 | ----- | -------------- | -------- | ---------- |
-| `baidu` | 百度统计脚本地址 | _string_ | `-` |
+| `baidu` | Baidu statistics script address | _string_ | `-` |
 
 #### SitePC, SiteMobile
 

package/README.md

@@ -53,6 +53,32 @@ yarn dev
 | `analysis` | 文档统计相关 | _SiteAnalysis_ | `-` |
 | `pc` | pc端文档结构配置 | _SitePC_ | `-` |
 | `mobile` | mobile端文档结构配置 | _SiteMobile_ | `-` |
+| `moduleCompatible` | 模块兼容配置 | _Record<string, string>_ | `-` |
+
+#### 模块适配对象
+
+一些外部依赖可能需要进行模块语法的适配，以达到可以正确编译到`commonjs`和`esmodule`的目的，例如`dayjs`的`esmodule`写法是
+
+```js
+import dayjs from 'dayjs/esm'
+```
+
+而为了构建`commonjs`时的写法是
+
+```js
+import * as dayjs from 'dayjs'
+```
+
+在项目中我们拥抱`esmodule`模块使用第一种写法，并做如下配置进行适配
+
+```js
+// varlet.config.js
+module.exports = {
+  moduleCompatible: {
+    "import dayjs from 'dayjs/esm'\n": "import * as dayjs from 'dayjs'\n"
+  }
+}
+```
 
 #### SiteThemes
 

package/lib/compiler/compileModule.js

@@ -47,6 +47,7 @@ var compileScript_1 = require("./compileScript");
 var compileStyle_1 = require("./compileStyle");
 var vite_config_1 = require("../config/vite.config");
 var varlet_config_1 = require("../config/varlet.config");
+var compileTypes_1 = require("./compileTypes");
 function compileUMD() {
     return new Promise(function (resolve, reject) {
         var config = (0, vite_config_1.getUMDConfig)((0, varlet_config_1.getVarletConfig)());
@@ -142,7 +143,7 @@ function compileModule(modules) {
                     return [4 /*yield*/, (0, fs_extra_1.copy)(constant_1.SRC_DIR, dest)];
                 case 3:
                     _a.sent();
-                    return [4 /*yield*/, (0, fs_extra_1.readdir)(constant_1.ES_DIR)];
+                    return [4 /*yield*/, (0, fs_extra_1.readdir)(dest)];
                 case 4:
                     moduleDir = _a.sent();
                     return [4 /*yield*/, Promise.all(moduleDir.map(function (filename) {
@@ -161,6 +162,7 @@ function compileModule(modules) {
                     return [4 /*yield*/, (modules === 'commonjs' ? (0, compileScript_1.compileCommonJSEntry)(dest, publicDirs) : (0, compileScript_1.compileESEntry)(dest, publicDirs))];
                 case 7:
                     _a.sent();
+                    (0, compileTypes_1.generateReference)(dest);
                     return [2 /*return*/];
             }
         });

package/lib/compiler/compileScript.d.ts

@@ -2,10 +2,15 @@ export declare const IMPORT_VUE_PATH_RE: RegExp;
 export declare const IMPORT_TS_PATH_RE: RegExp;
 export declare const IMPORT_JSX_PATH_RE: RegExp;
 export declare const IMPORT_TSX_PATH_RE: RegExp;
+export declare const REQUIRE_VUE_PATH_RE: RegExp;
+export declare const REQUIRE_TS_PATH_RE: RegExp;
+export declare const REQUIRE_JSX_PATH_RE: RegExp;
+export declare const REQUIRE_TSX_PATH_RE: RegExp;
 export declare const replaceVueExt: (script: string) => string;
 export declare const replaceTSExt: (script: string) => string;
 export declare const replaceJSXExt: (script: string) => string;
 export declare const replaceTSXExt: (script: string) => string;
+export declare const moduleCompatible: (script: string) => string;
 export declare function compileScript(script: string, file: string): Promise<void>;
 export declare function compileScriptFile(file: string): Promise<void>;
 export declare function compileESEntry(dir: string, publicDirs: string[]): Promise<void>;

package/lib/compiler/compileScript.js

@@ -36,36 +36,63 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.compileCommonJSEntry = exports.compileESEntry = exports.compileScriptFile = exports.compileScript = exports.replaceTSXExt = exports.replaceJSXExt = exports.replaceTSExt = exports.replaceVueExt = exports.IMPORT_TSX_PATH_RE = exports.IMPORT_JSX_PATH_RE = exports.IMPORT_TS_PATH_RE = exports.IMPORT_VUE_PATH_RE = void 0;
+exports.compileCommonJSEntry = exports.compileESEntry = exports.compileScriptFile = exports.compileScript = exports.moduleCompatible = exports.replaceTSXExt = exports.replaceJSXExt = exports.replaceTSExt = exports.replaceVueExt = exports.REQUIRE_TSX_PATH_RE = exports.REQUIRE_JSX_PATH_RE = exports.REQUIRE_TS_PATH_RE = exports.REQUIRE_VUE_PATH_RE = exports.IMPORT_TSX_PATH_RE = exports.IMPORT_JSX_PATH_RE = exports.IMPORT_TS_PATH_RE = exports.IMPORT_VUE_PATH_RE = void 0;
 var core_1 = require("@babel/core");
 var fsUtils_1 = require("../shared/fsUtils");
 var fs_extra_1 = require("fs-extra");
 var compileStyle_1 = require("./compileStyle");
 var path_1 = require("path");
+var lodash_1 = require("lodash");
+var varlet_config_1 = require("../config/varlet.config");
 exports.IMPORT_VUE_PATH_RE = /((?<!['"`])import\s+.+from\s+['"]\s*\.{1,2}\/.+)\.vue(\s*['"`]);?(?!\s*['"`])/g;
 exports.IMPORT_TS_PATH_RE = /((?<!['"`])import\s+.+from\s+['"]\s*\.{1,2}\/.+)\.ts(\s*['"`]);?(?!\s*['"`])/g;
 exports.IMPORT_JSX_PATH_RE = /((?<!['"`])import\s+.+from\s+['"]\s*\.{1,2}\/.+)\.jsx(\s*['"`]);?(?!\s*['"`])/g;
 exports.IMPORT_TSX_PATH_RE = /((?<!['"`])import\s+.+from\s+['"]\s*\.{1,2}\/.+)\.tsx(\s*['"`]);?(?!\s*['"`])/g;
+exports.REQUIRE_VUE_PATH_RE = /(?<!['"`]\s*)(require\s*\(\s*['"]\s*\.{1,2}\/.+)\.vue(\s*['"`]\))(?!\s*['"`])/g;
+exports.REQUIRE_TS_PATH_RE = /(?<!['"`]\s*)(require\s*\(\s*['"]\s*\.{1,2}\/.+)\.ts(\s*['"`]\))(?!\s*['"`])/g;
+exports.REQUIRE_JSX_PATH_RE = /(?<!['"`]\s*)(require\s*\(\s*['"]\s*\.{1,2}\/.+)\.jsx(\s*['"`]\))(?!\s*['"`])/g;
+exports.REQUIRE_TSX_PATH_RE = /(?<!['"`]\s*)(require\s*\(\s*['"]\s*\.{1,2}\/.+)\.tsx(\s*['"`]\))(?!\s*['"`])/g;
 var scriptReplacer = function (_, p1, p2) { return p1 + ".js" + p2; };
-var replaceVueExt = function (script) { return script.replace(exports.IMPORT_VUE_PATH_RE, scriptReplacer); };
+var replaceVueExt = function (script) {
+    return script.replace(exports.IMPORT_VUE_PATH_RE, scriptReplacer).replace(exports.REQUIRE_VUE_PATH_RE, scriptReplacer);
+};
 exports.replaceVueExt = replaceVueExt;
-var replaceTSExt = function (script) { return script.replace(exports.IMPORT_TS_PATH_RE, scriptReplacer); };
+var replaceTSExt = function (script) {
+    return script.replace(exports.IMPORT_TS_PATH_RE, scriptReplacer).replace(exports.REQUIRE_TS_PATH_RE, scriptReplacer);
+};
 exports.replaceTSExt = replaceTSExt;
-var replaceJSXExt = function (script) { return script.replace(exports.IMPORT_JSX_PATH_RE, scriptReplacer); };
+var replaceJSXExt = function (script) {
+    return script.replace(exports.IMPORT_JSX_PATH_RE, scriptReplacer).replace(exports.REQUIRE_JSX_PATH_RE, scriptReplacer);
+};
 exports.replaceJSXExt = replaceJSXExt;
-var replaceTSXExt = function (script) { return script.replace(exports.IMPORT_TSX_PATH_RE, scriptReplacer); };
+var replaceTSXExt = function (script) {
+    return script.replace(exports.IMPORT_TSX_PATH_RE, scriptReplacer).replace(exports.REQUIRE_TSX_PATH_RE, scriptReplacer);
+};
 exports.replaceTSXExt = replaceTSXExt;
+var moduleCompatible = function (script) {
+    var moduleCompatible = (0, lodash_1.get)((0, varlet_config_1.getVarletConfig)(), 'moduleCompatible', {});
+    Object.keys(moduleCompatible).forEach(function (esm) {
+        var commonjs = moduleCompatible[esm];
+        script = script.replace(esm, commonjs);
+    });
+    return script;
+};
+exports.moduleCompatible = moduleCompatible;
 function compileScript(script, file) {
     return __awaiter(this, void 0, void 0, function () {
-        var code, modules;
+        var modules, code;
         return __generator(this, function (_a) {
             switch (_a.label) {
-                case 0: return [4 /*yield*/, (0, core_1.transformAsync)(script, {
-                        filename: file,
-                    })];
+                case 0:
+                    modules = process.env.BABEL_MODULE;
+                    if (modules === 'commonjs') {
+                        script = (0, exports.moduleCompatible)(script);
+                    }
+                    return [4 /*yield*/, (0, core_1.transformAsync)(script, {
+                            filename: file,
+                        })];
                 case 1:
                     code = (_a.sent()).code;
-                    modules = process.env.BABEL_MODULE;
                     code = (0, compileStyle_1.extractStyleDependencies)(file, code, modules === 'commonjs' ? compileStyle_1.REQUIRE_CSS_RE : compileStyle_1.IMPORT_CSS_RE, 'css', false);
                     code = (0, compileStyle_1.extractStyleDependencies)(file, code, modules === 'commonjs' ? compileStyle_1.REQUIRE_LESS_RE : compileStyle_1.IMPORT_LESS_RE, 'less', false);
                     code = (0, exports.replaceVueExt)(code);
@@ -150,7 +177,7 @@ function compileCommonJSEntry(dir, publicDirs) {
                     publicDirs.forEach(function (dirname) {
                         var publicComponent = (0, fsUtils_1.bigCamelize)(dirname);
                         publicComponents.push(publicComponent);
-                        requires.push("const " + publicComponent + " = require('./" + dirname + "')");
+                        requires.push("var " + publicComponent + " = require('./" + dirname + "')['default']");
                         plugins.push(publicComponent + ".install && app.use(" + publicComponent + ")");
                         cssRequires.push("require('./" + dirname + "/style')");
                         lessRequires.push("require('./" + dirname + "/style/less')");

package/lib/compiler/compileTypes.d.ts

@@ -1 +1,2 @@
+export declare function generateReference(moduleDir: string): void;
 export declare function compileTypes(): Promise<void>;

package/lib/compiler/compileTypes.js

@@ -36,13 +36,17 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.compileTypes = void 0;
+exports.compileTypes = exports.generateReference = void 0;
 var fs_extra_1 = require("fs-extra");
 var constant_1 = require("../shared/constant");
 var fsUtils_1 = require("../shared/fsUtils");
 var path_1 = require("path");
 var varlet_config_1 = require("../config/varlet.config");
 var lodash_1 = require("lodash");
+function generateReference(moduleDir) {
+    (0, fs_extra_1.writeFileSync)((0, path_1.resolve)(moduleDir, 'index.d.ts'), "export * from '" + (0, path_1.relative)(moduleDir, constant_1.TYPES_DIR) + "'\n");
+}
+exports.generateReference = generateReference;
 function compileTypes() {
     return __awaiter(this, void 0, void 0, function () {
         var varletConfig, namespace, name, dir, ignoreEntryDir, exports, declares, template, globalTemplate;

package/lib/config/vite.config.js

@@ -80,12 +80,16 @@ function inlineCSS(fileName, dir) {
         apply: 'build',
         closeBundle: function () {
             var cssFile = (0, path_1.resolve)(dir, 'style.css');
+            if (!(0, fs_extra_1.pathExistsSync)(cssFile)) {
+                return;
+            }
             var jsFile = (0, path_1.resolve)(dir, fileName);
             var cssCode = (0, fs_extra_1.readFileSync)(cssFile, 'utf-8');
             var jsCode = (0, fs_extra_1.readFileSync)(jsFile, 'utf-8');
             var injectCode = ";(function(){var style=document.createElement('style');style.type='text/css';style.rel='stylesheet';style.appendChild(document.createTextNode(`" + cssCode.replace(/\\/g, '\\\\') + "`));var head=document.querySelector('head');head.appendChild(style)})();";
-            (0, fs_extra_1.removeSync)(cssFile);
             (0, fs_extra_1.writeFileSync)(jsFile, "" + injectCode + jsCode);
+            (0, fs_extra_1.copyFileSync)(cssFile, (0, path_1.resolve)(constant_1.LIB_DIR, 'style.css'));
+            (0, fs_extra_1.removeSync)(cssFile);
         },
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "1.23.4-alpha.1+2a8848a6",
+  "version": "1.23.4-alpha.16+3e8b7b4e",
   "description": "cli of varlet",
   "bin": {
     "varlet-cli": "./lib/index.js"
@@ -31,7 +31,7 @@
     "dev": "tsc --watch",
     "build": "tsc"
   },
-  "gitHead": "2a8848a6f064aa91d56875ba467c46da79589a79",
+  "gitHead": "3e8b7b4e5489bc67dd38f8787477f07e2a13e7ac",
   "dependencies": {
     "@babel/core": "^7.14.8",
     "@babel/preset-env": "^7.14.8",
@@ -47,7 +47,7 @@
     "@vitejs/plugin-vue": "1.9.2",
     "@vitejs/plugin-vue-jsx": "1.1.8",
     "@vue/babel-plugin-jsx": "^1.0.7",
-    "@vue/compiler-sfc": "3.2.16",
+    "@vue/compiler-sfc": "3.2.22",
     "@vue/test-utils": "^2.0.0-rc.6",
     "babel-jest": "26.6.3",
     "chalk": "^4.1.0",