@varlet/cli 2.7.0-alpha.1673639241179 → 2.7.0-alpha.1673641087704

package/README.en-US.md

@@ -61,7 +61,7 @@ Also refer to `@varlet/ui` [varlet.config.mjs](https://github.com/varletjs/varle
 If you want to insert other pages into the component library, you can create a `pages` folder in the project root directory to write a vue component to generate other pages.
 The directory structure is as follows:
 
-```js
+```text
 |-- varlet-ui
   |-- src
   |-- docs
@@ -77,7 +77,6 @@ The directory structure is as follows:
         |-- zh-CN.ts
         |-- en-US.ts
       |-- index.vue
-      
 ```
 
 The resulting route is as follows:
@@ -197,30 +196,3 @@ varlet-cli create
 
 - 1.`npm` repository registry must set to `npm` official mirror
 - 2.Execute `npm login` to log in
-
-### 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.mjs
-import { defineConfig } from '@varlet/cli'
-
-export default defineConfig({
-  moduleCompatible: {
-    "import dayjs from 'dayjs/esm'\n": "import * as dayjs from 'dayjs'\n"
-  }
-})
-```

package/README.md

@@ -59,7 +59,7 @@ varlet-cli gen
 如果想在组件库中插入其他页面，可以在项目根目录下的创建 `pages` 文件夹编写 vue 组件， 用来生成其他的页面。
 目录结构如下：
 
-```js
+```text
 |-- varlet-ui
   |-- src
   |-- docs
@@ -75,7 +75,6 @@ varlet-cli gen
         |-- zh-CN.ts
         |-- en-US.ts
       |-- index.vue
-      
 ```
 
 生成的路由如下：
@@ -194,31 +193,4 @@ varlet-cli create
 ### 发布前注意
 
 1. `npm` 的仓库源必须指向 `npm` 官方镜像
-2. 执行 `npm login` 进行登录
-
-### 模块适配对象
-
-一些外部依赖可能需要进行模块语法的适配，以达到可以正确编译到 `commonjs` 和 `esmodule` 的目的，例如 `dayjs` 的 `esmodule` 写法是
-
-```js
-import dayjs from 'dayjs/esm'
-```
-
-而为了构建 `commonjs` 时的写法是
-
-```js
-import * as dayjs from 'dayjs'
-```
-
-在项目中我们拥抱 `esmodule` 模块使用第一种写法，并做如下配置进行适配
-
-```js
-// varlet.config.mjs
-import { defineConfig } from '@varlet/cli'
-
-export default defineConfig({
-  moduleCompatible: {
-    "import dayjs from 'dayjs/esm'\n": "import * as dayjs from 'dayjs'\n"
-  }
-})
-```
+2. 执行 `npm login` 进行登录

package/lib/node/commands/compile.js

@@ -2,7 +2,7 @@ import ora from 'ora';
 import logger from '../shared/logger.js';
 import fse from 'fs-extra';
 import { ES_DIR, HL_DIR, LIB_DIR, UMD_DIR } from '../shared/constant.js';
-import { compileModule } from '../compiler/compileModule.js';
+import { compileBundle, compileModule } from '../compiler/compileModule.js';
 import { compileTemplateHighlight } from '../compiler/compileTemplateHighlight.js';
 import { compileTypes } from '../compiler/compileTypes.js';
 const { remove } = fse;
@@ -24,13 +24,8 @@ export async function compile() {
     process.env.NODE_ENV = 'compile';
     await removeDir();
     await Promise.all([runTask('types', compileTypes), runTask('template highlight', compileTemplateHighlight)]);
-    process.env.TARGET_MODULE = 'module';
     process.env.BABEL_MODULE = 'module';
     await runTask('module', compileModule);
-    process.env.TARGET_MODULE = 'commonjs';
-    process.env.BABEL_MODULE = 'commonjs';
-    await runTask('commonjs', compileModule);
     process.env.BABEL_MODULE = '';
-    process.env.TARGET_MODULE = 'bundle';
-    await runTask('bundle', compileModule);
+    await runTask('bundle', compileBundle);
 }

package/lib/node/compiler/compileModule.js

@@ -4,7 +4,7 @@ import { resolve } from 'path';
 import { EXAMPLE_DIR_NAME, TESTS_DIR_NAME, DOCS_DIR_NAME, SRC_DIR, ES_DIR, STYLE_DIR_NAME, LIB_DIR, UMD_DIR, } from '../shared/constant.js';
 import { getPublicDirs, isDir, isDTS, isLess, isScript, isSFC } from '../shared/fsUtils.js';
 import { compileSFC } from './compileSFC.js';
-import { compileESEntry, compileCommonJSEntry, compileScriptFile, getScriptExtname } from './compileScript.js';
+import { compileESEntry, compileScriptFile, getScriptExtname } from './compileScript.js';
 import { clearLessFiles, compileLess } from './compileStyle.js';
 import { getBundleConfig } from '../config/vite.config.js';
 import { getVarletConfig } from '../config/varlet.config.js';
@@ -56,12 +56,7 @@ export async function compileFile(file) {
     isDir(file) && (await compileDir(file));
 }
 export async function compileModule() {
-    const targetModule = process.env.TARGET_MODULE;
-    if (targetModule === 'bundle') {
-        await compileBundle();
-        return;
-    }
-    const dest = targetModule === 'commonjs' ? LIB_DIR : ES_DIR;
+    const dest = ES_DIR;
     await copy(SRC_DIR, dest);
     const moduleDir = await readdir(dest);
     await Promise.all(moduleDir.map((filename) => {
@@ -70,12 +65,7 @@ export async function compileModule() {
         return isDir(file) ? compileDir(file) : null;
     }));
     const publicDirs = await getPublicDirs();
-    if (targetModule === 'commonjs') {
-        await compileCommonJSEntry(dest, publicDirs);
-    }
-    else {
-        await compileESEntry(dest, publicDirs);
-    }
+    await compileESEntry(dest, publicDirs);
     clearLessFiles(dest);
     generateReference(dest);
 }

package/lib/node/compiler/compileSFC.js

@@ -68,9 +68,7 @@ export async function compileSFC(sfc) {
             });
             code = extractStyleDependencies(file, code, STYLE_IMPORT_RE);
             writeFileSync(file, clearEmptyLine(code), 'utf-8');
-            smartAppendFileSync(cssFile, process.env.TARGET_MODULE === 'commonjs'
-                ? `require('${dependencyPath}.css')\n`
-                : `import '${dependencyPath}.css'\n`);
+            smartAppendFileSync(cssFile, `import '${dependencyPath}.css'\n`);
             if (style.lang === 'less') {
                 await compileLess(file);
             }

package/lib/node/compiler/compileScript.d.ts

@@ -1,16 +1,13 @@
 export declare const IMPORT_FROM_DEPENDENCE_RE: RegExp;
 export declare const EXPORT_FROM_DEPENDENCE_RE: RegExp;
 export declare const IMPORT_DEPENDENCE_RE: RegExp;
-export declare const REQUIRE_DEPENDENCE_RE: RegExp;
 export declare const scriptExtNames: string[];
 export declare const styleExtNames: string[];
 export declare const scriptIndexes: string[];
 export declare const styleIndexes: string[];
 export declare const tryMatchExtname: (file: string, extname: string[]) => string | undefined;
 export declare const resolveDependence: (file: string, script: string) => string;
-export declare const moduleCompatible: (script: string) => Promise<string>;
 export declare function compileScript(script: string, file: string): Promise<void>;
 export declare function compileScriptFile(file: string): Promise<void>;
-export declare function getScriptExtname(): ".js" | ".mjs";
+export declare function getScriptExtname(): string;
 export declare function compileESEntry(dir: string, publicDirs: string[]): Promise<void>;
-export declare function compileCommonJSEntry(dir: string, publicDirs: string[]): Promise<void>;

package/lib/node/compiler/compileScript.js

@@ -2,10 +2,8 @@ import fse from 'fs-extra';
 import { transformAsync } from '@babel/core';
 import { bigCamelize } from '@varlet/shared';
 import { getVersion, isDir, replaceExt } from '../shared/fsUtils.js';
-import { extractStyleDependencies, IMPORT_CSS_RE, IMPORT_LESS_RE, REQUIRE_CSS_RE, REQUIRE_LESS_RE, } from './compileStyle.js';
+import { extractStyleDependencies, IMPORT_CSS_RE, IMPORT_LESS_RE } from './compileStyle.js';
 import { resolve, extname, dirname } from 'path';
-import { get } from 'lodash-es';
-import { getVarletConfig } from '../config/varlet.config.js';
 const { writeFileSync, readdirSync, readFileSync, removeSync, writeFile, pathExistsSync } = fse;
 // https://regexr.com/765a4
 export const IMPORT_FROM_DEPENDENCE_RE = /import\s+?[\w\s{},$*]+\s+from\s+?(".*?"|'.*?')/g;
@@ -13,8 +11,6 @@ export const IMPORT_FROM_DEPENDENCE_RE = /import\s+?[\w\s{},$*]+\s+from\s+?(".*?
 export const EXPORT_FROM_DEPENDENCE_RE = /export\s+?[\w\s{},$*]+\s+from\s+?(".*?"|'.*?')/g;
 // https://regexr.com/764ve
 export const IMPORT_DEPENDENCE_RE = /import\s+(".*?"|'.*?')/g;
-// https://regexr.com/764vn
-export const REQUIRE_DEPENDENCE_RE = /require\((".*?"|'.*?')\)/g;
 export const scriptExtNames = ['.vue', '.ts', '.tsx', '.mjs', '.js', '.jsx'];
 export const styleExtNames = ['.less', '.css'];
 export const scriptIndexes = ['index.mjs', 'index.vue', 'index.ts', 'index.tsx', 'index.js', 'index.jsx'];
@@ -42,7 +38,7 @@ export const resolveDependence = (file, script) => {
         }
         if (ext) {
             if (scriptExtNames.includes(ext)) {
-                // e.g. './a.vue' -> './a.m?js'
+                // e.g. './a.vue' -> './a.mjs'
                 return done(dependence.replace(ext, scriptExtname));
             }
             if (styleExtNames.includes(ext)) {
@@ -51,7 +47,7 @@ export const resolveDependence = (file, script) => {
             }
         }
         if (!ext) {
-            // e.g. ../button/props -> ../button/props.m?js
+            // e.g. ../button/props -> ../button/props.mjs
             const matchedScript = tryMatchExtname(targetDependenceFile, scriptExtNames);
             if (matchedScript) {
                 return done(`${dependence}${scriptExtname}`);
@@ -66,7 +62,7 @@ export const resolveDependence = (file, script) => {
             const files = readdirSync(targetDependenceFile);
             const hasScriptIndex = files.some((file) => scriptIndexes.some((name) => file.endsWith(name)));
             if (hasScriptIndex) {
-                // e.g. -> ../button/index.m?js
+                // e.g. -> ../button/index.mjs
                 return done(`${dependence}/index${scriptExtname}`);
             }
             const hasStyleIndex = files.some((file) => styleIndexes.some((name) => file.endsWith(name)));
@@ -80,29 +76,16 @@ export const resolveDependence = (file, script) => {
     return script
         .replace(IMPORT_FROM_DEPENDENCE_RE, replacer)
         .replace(EXPORT_FROM_DEPENDENCE_RE, replacer)
-        .replace(IMPORT_DEPENDENCE_RE, replacer)
-        .replace(REQUIRE_DEPENDENCE_RE, replacer);
-};
-export const moduleCompatible = async (script) => {
-    const moduleCompatible = get(await getVarletConfig(), 'moduleCompatible', {});
-    Object.keys(moduleCompatible).forEach((esm) => {
-        const commonjs = moduleCompatible[esm];
-        script = script.replace(esm, commonjs);
-    });
-    return script;
+        .replace(IMPORT_DEPENDENCE_RE, replacer);
 };
 export async function compileScript(script, file) {
-    const targetModule = process.env.TARGET_MODULE;
-    if (targetModule === 'commonjs') {
-        script = await moduleCompatible(script);
-    }
     let { code } = (await transformAsync(script, {
         filename: file,
     }));
     if (code) {
         code = resolveDependence(file, code);
-        code = extractStyleDependencies(file, code, targetModule === 'commonjs' ? REQUIRE_CSS_RE : IMPORT_CSS_RE);
-        code = extractStyleDependencies(file, code, targetModule === 'commonjs' ? REQUIRE_LESS_RE : IMPORT_LESS_RE);
+        code = extractStyleDependencies(file, code, IMPORT_CSS_RE);
+        code = extractStyleDependencies(file, code, IMPORT_LESS_RE);
         removeSync(file);
         writeFileSync(replaceExt(file, getScriptExtname()), code, 'utf8');
     }
@@ -112,10 +95,7 @@ export async function compileScriptFile(file) {
     await compileScript(sources, file);
 }
 export function getScriptExtname() {
-    if (process.env.TARGET_MODULE === 'module') {
-        return '.mjs';
-    }
-    return '.js';
+    return '.mjs';
 }
 export async function compileESEntry(dir, publicDirs) {
     const imports = [];
@@ -183,54 +163,3 @@ export default {
         writeFile(resolve(dir, 'style.mjs'), styleTemplate, 'utf-8'),
     ]);
 }
-export async function compileCommonJSEntry(dir, publicDirs) {
-    const requires = [];
-    const plugins = [];
-    const cssRequires = [];
-    const publicComponents = [];
-    const exports = [];
-    publicDirs.forEach((dirname) => {
-        const publicComponent = bigCamelize(dirname);
-        const module = `'./${dirname}/index.js'`;
-        publicComponents.push(publicComponent);
-        requires.push(`var ${publicComponent} = require(${module})['default']`);
-        exports.push(`...ignoreDefault(require(${module}))`);
-        plugins.push(`${publicComponent}.install && app.use(${publicComponent})`);
-        cssRequires.push(`require('./${dirname}/style/index.js')`);
-    });
-    const version = `const version = '${getVersion()}'`;
-    const install = `
-function install(app) {
-  ${plugins.join('\n  ')}
-}
-`;
-    const indexTemplate = `\
-${requires.join('\n')}\n
-${version}
-${install}
-
-function ignoreDefault(module) {
-  return Object.keys(module).reduce((exports, key) => {
-    if (key !== 'default') {
-      exports[key] = module[key]
-    }
-
-    return exports
-  }, {})
-}
-
-module.exports = {
-  version,
-  install,
-  ${exports.join(',\n  ')},
-  ${publicComponents.join(',\n  ')}
-}
-`;
-    const styleTemplate = `\
-${cssRequires.join('\n')}
-`;
-    await Promise.all([
-        writeFile(resolve(dir, 'index.js'), indexTemplate, 'utf-8'),
-        writeFile(resolve(dir, 'style.js'), styleTemplate, 'utf-8'),
-    ]);
-}

package/lib/node/compiler/compileStyle.d.ts

@@ -2,8 +2,6 @@ export declare const EMPTY_SPACE_RE: RegExp;
 export declare const EMPTY_LINE_RE: RegExp;
 export declare const IMPORT_CSS_RE: RegExp;
 export declare const IMPORT_LESS_RE: RegExp;
-export declare const REQUIRE_CSS_RE: RegExp;
-export declare const REQUIRE_LESS_RE: RegExp;
 export declare const STYLE_IMPORT_RE: RegExp;
 export declare const clearEmptyLine: (s: string) => string;
 export declare function normalizeStyleDependency(styleImport: string, reg: RegExp): string;

package/lib/node/compiler/compileStyle.js

@@ -10,8 +10,6 @@ export const EMPTY_SPACE_RE = /[\s]+/g;
 export const EMPTY_LINE_RE = /[\n\r]*/g;
 export const IMPORT_CSS_RE = /(?<!['"`])import\s+['"](\.{1,2}\/.+\.css)['"]\s*;?(?!\s*['"`])/g;
 export const IMPORT_LESS_RE = /(?<!['"`])import\s+['"](\.{1,2}\/.+\.less)['"]\s*;?(?!\s*['"`])/g;
-export const REQUIRE_CSS_RE = /(?<!['"`])require\(\s*['"](\.{1,2}\/.+\.css)['"]\s*\);?(?!\s*['"`])/g;
-export const REQUIRE_LESS_RE = /(?<!['"`])require\(\s*['"](\.{1,2}\/.+\.less)['"]\s*\);?(?!\s*['"`])/g;
 export const STYLE_IMPORT_RE = /@import\s+['"](.+)['"]\s*;/g;
 export const clearEmptyLine = (s) => s.replace(EMPTY_LINE_RE, '').replace(EMPTY_SPACE_RE, ' ');
 export function normalizeStyleDependency(styleImport, reg) {
@@ -26,10 +24,9 @@ export function extractStyleDependencies(file, code, styleReg) {
     var _a;
     const styleImports = (_a = code.match(styleReg)) !== null && _a !== void 0 ? _a : [];
     const cssFile = resolve(parse(file).dir, `./style/index${getScriptExtname()}`);
-    const targetModule = process.env.TARGET_MODULE;
     styleImports.forEach((styleImport) => {
         const normalizedPath = normalizeStyleDependency(styleImport, styleReg);
-        smartAppendFileSync(cssFile, targetModule === 'commonjs' ? `require('${normalizedPath}.css')\n` : `import '${normalizedPath}.css'\n`);
+        smartAppendFileSync(cssFile, `import '${normalizedPath}.css'\n`);
     });
     return code.replace(styleReg, '');
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "2.7.0-alpha.1673639241179",
+  "version": "2.7.0-alpha.1673641087704",
   "type": "module",
   "description": "cli of varlet",
   "bin": {
@@ -66,8 +66,8 @@
     "vite": "4.0.4",
     "vue": "3.2.25",
     "vue-jest": "^5.0.0-alpha.8",
-    "@varlet/shared": "2.7.0-alpha.1673639241179",
-    "@varlet/vite-plugins": "2.7.0-alpha.1673639241179"
+    "@varlet/shared": "2.7.0-alpha.1673641087704",
+    "@varlet/vite-plugins": "2.7.0-alpha.1673641087704"
   },
   "devDependencies": {
     "@types/babel__core": "^7.1.12",
@@ -79,8 +79,8 @@
     "@types/node": "^18.7.20",
     "@types/semver": "^7.3.9",
     "@types/inquirer": "^9.0.2",
-    "@varlet/touch-emulator": "2.7.0-alpha.1673639241179",
-    "@varlet/icons": "2.7.0-alpha.1673639241179"
+    "@varlet/icons": "2.7.0-alpha.1673641087704",
+    "@varlet/touch-emulator": "2.7.0-alpha.1673641087704"
   },
   "peerDependencies": {
     "@vue/runtime-core": "3.2.16",
@@ -90,8 +90,8 @@
     "lodash-es": "^4.17.21",
     "vue": "3.2.25",
     "vue-router": "4.0.12",
-    "@varlet/icons": "2.7.0-alpha.1673639241179",
-    "@varlet/touch-emulator": "2.7.0-alpha.1673639241179"
+    "@varlet/icons": "2.7.0-alpha.1673641087704",
+    "@varlet/touch-emulator": "2.7.0-alpha.1673641087704"
   },
   "scripts": {
     "dev": "tsc --watch",