@varlet/cli 2.0.0-alpha.1664332224687 → 2.0.0-alpha.1664527888620

package/README.en-US.md

@@ -4,30 +4,27 @@ The out-of-the-box `Vue3 component library` rapid prototyping tool provides a se
 
 ### Feature
 
-- 1.Out-of-the-box component library development environment
-- 2.Out-of-the-box component library compilation tool, support exporting `esm` and `umd` two module codes
-- 3.Component library document site based on configuration files, support Baidu statistics and theme customization
-- 4.Supports `single file component (sfc)` and `tsx, jsx` two styles of component library writing styles
-- 5.Code inspection tool out of the box
-- 6.Unit testing tools out of the box
-- 7.Out-of-the-box code publishing tool, publish to npm and github, and automatically generate a change log
-- 8.Support `Typescript`
-- 9.Support `Dark Mode`
-- 10.Based on `pnpm`
+- 📦  Out-of-the-box component library development environment
+- 📦  An out-of-the-box component library compilation tool that supports exporting `esm`, `cjs`, `umd` module codes
+- 🛠️  Configuration file-based component library documentation site, support Baidu statistics and theme customization
+- 🛠️  Supports both `sfc` and `tsx` styles for writing component libraries
+- 📦  Out-of-the-box code inspection tool
+- 📦  Out-of-the-box unit testing tools
+- 📦  Out-of-the-box code publishing tool, publishes to both `npm` and `github`, and automatically generates changelogs
+- 💪  Support for `Typescript`
+- 💪  Support `Dark Mode`
+- 🌍  Support `Internationalization`
+- 🚀  Based on `pnpm`
 
 ### Quickstart
 
-`@varlet/cli` has built-in `single file component (sfc)` and `tsx, jsx` two styles of component library project templates, which can be directly generated by the `gen` command.
-To help users directly enter the development of the component itself, it is recommended to use `pnpm` as a package management tool. 
+`@varlet/cli` has built-in `sfc` and `tsx` style component library project templates, which can be generated directly by the `gen` command.
+It is convenient for you to directly enter the component library development.
 
 ```shell
 # Install command line tools
 pnpm add @varlet/cli -g
-# Use the gen command to generate the project
-varlet-cli gen projectName
-cd projectName
-pnpm install
-pnpm dev
+varlet-cli gen
 ```
 
 Then by simply modifying some basic information of the component library template,
@@ -37,175 +34,62 @@ you can start the development of the component library
 
 ### Configuration file
 
-The `varlet.config.js` in the project root directory is used to manage the specific details of the entire component library project
+The `varlet.config.js` in the project root directory is used to manage the specific details of the entire component library project.
+The default configuration can be viewed [varlet.default.config.js](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/varlet.default.config.js)。
+Also refer to `@varlet/ui` [varlet.config.js](https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/varlet.config.js)
 
 | Parameter | Description | Type | Default |
-| ----- | -------------- | -------- | ---------- |
+| -- | -------------- | -------- | ---------- |
+| `name` | The full name of the component library, which will be used as the package name | _string_ | `Varlet` |
+| `namespace` | Component library namespace, which will be used as a component prefix | _string_ | `var` |
 | `host` | Development server host | _number_ | `localhost` |
 | `port` | Development server port | _number_ | `8080` |
-| `name` | Full name of the component library	| _string_ | `Varlet` |
-| `namespace` | Component library namespace, Will be used as a component prefix | _string_ | `var` |
-| `title` | The title of the component library in the document | _string_ | `VARLET` |
-| `logo` | The logo of the component library in the document | _string_ | `-` |
-| `defaultLanguage` | Document default language | _string_ | `zh-CN` |
-| `useMobile` | Whether to display the right mobile phone preview | _boolean_ | `false` |
-| `themes` | Document themes | _SiteThemes_ | `-` |
-| `darkThemes` | Document dark mode themes | _SiteThemes_ | `-` |
-| `highlight` | Document code snippet style related | _SiteHighlight_ | `-` |
-| `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
+| `title` | The title of the component library in the documentation | _string_ | `VARLET` |
+| `logo` | The logo of the component library in the documentation | _string_ | `-` |
+| `defaultLanguage` | Documentation default language | _string_ | `zh-CN` |
+| `useMobile` | Whether to show the preview of the right mobile phone | _boolean_ | `false` |
+| `lightTheme` | Light Mode Documentation Theme | _Record<string, any>_ | `-` |
+| `darkTheme` | Dark Mode Documentation Theme | _Record<string, any>_ | `-` |
+| `highlight` | Documentation snippet style related | _{ style: string }_ | `-` |
+| `analysis` | Document statistics related | _{ baidu: string }_ | `-` |
+| `pc` | PC-side document structure configuration | _Record<string, any>_ | `-` |
+| `mobile` | Mobile side document structure configuration | _Record<string, any>_ | `-` |
+| `moduleCompatible` | Module Compatible Configurations | _Record<string, string>_ | `-` |
+
+### Custom pages
+
+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
-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
-
-Theme variables are related, 
-because the default theme variables may be modified from time to time,
-subject to the theme of the `varlet` official document
-
-| Variable |
-| ----- |
-| `color-body` |
-| `color-bar` |
-| `color-sub-bar` |
-| `color-text` |
-| `color-sub-text` |
-| `color-border` |
-| `color-shadow` |
-| `color-introduce-border` |
-| `color-primary` |
-| `color-link` |
-| `color-type` |
-| `color-progress` |
-| `color-progress-track` |
-| `color-side-bar` |
-| `color-side-bar-active-background` |
-| `color-app-bar` |
-| `color-nav-button-hover-background` |
-| `color-mobile-cell-hover` |
-| `color-pc-language-active` |
-| `color-pc-language-active-background` |
-| `color-mobile-language-active` |
-| `color-mobile-language-active-background` |
-| `color-hl-background` |
-| `color-hl-code` |
-| `color-hl-border` |
-| `color-hl-group-a` |
-| `color-hl-group-b` |
-| `color-hl-group-c` |
-| `color-hl-group-d` |
-| `color-hl-group-e` |
-| `color-hl-group-f` |
-| `color-hl-group-g` |
-| `color-hl-group-h` |
-| `color-hl-group-i` |
-
-#### SiteHighlight
-
-Code snippets are highlighted, based on [highlight.js](https://highlightjs.org/)
-
-| Parameter | Description | Type | Default |
-| ----- | -------------- | -------- | ---------- |
-| `style` | highlight css link | _string_ | `-` |
+|-- varlet-ui
+  |-- src
+  |-- docs
+  |-- pages
+    |-- sponsor
+      |-- index.vue
+    |-- contributor
+      |-- locale
+        |-- en-US.ts
+      |-- index.vue
+    |-- changelog
+      |-- locale
+        |-- zh-CN.ts
+        |-- en-US.ts
+      |-- index.vue
+      
+```
+
+The resulting route is as follows:
 
-#### SiteAnalysis
-
-Statistics related to buried points
-
-| Parameter | Description | Type | Default |
-| ----- | -------------- | -------- | ---------- |
-| `baidu` | Baidu statistics script address | _string_ | `-` |
-
-#### SitePC, SiteMobile
-
-The document structure is partly related, and the example configuration is as follows
-
-```js
-module.exports = {
-  defaultLanguage: 'en-US',
-  pc: {
-    redirect: '/home',
-    title: {
-      'en-US': 'A components library',
-    },
-    header: {
-      darkMode: null,
-      i18n: null,
-      github: 'https://github.com/varletjs/varlet',
-    },
-    menu: [
-      {
-        text: {
-          'en-US': 'Develop Guide',
-        },
-        // Sidebar menu directory
-        type: 1,
-      },
-      {
-        text: {
-          'en-US': 'Basic Intro',
-        },
-        doc: 'home',
-        // Index the md document in the root directory of the project
-        type: 3,
-      },
-      {
-        text: {
-          'en-US': 'Basic Component',
-        },
-        type: 1,
-      },
-      {
-        text: {
-          'en-US': 'Button',
-        },
-        doc: 'button',
-        // Md document in the root directory of the index component
-        type: 2,
-      },
-    ],
-  },
-  mobile: {
-    redirect: '/home',
-    title: {
-      'en-US': 'A components library',
-    },
-    header: {
-      darkMode: null,
-      i18n: null,
-      playground: null,
-      github: 'https://github.com/varletjs/varlet',
-    },
-  },
-}
+```text
+/zh-CN/sponsor
+/en-US/contributor
+/zh-CN/changelog
+/en-US/changelog
 ```
 
-### Commands Intro
+### Commands related
 
 #### Start the development server
 
@@ -270,133 +154,71 @@ varlet-cli release
 ```
 
 #### Generate a project template
+
 ```shell
-varlet-cli gen <projectName>
+varlet-cli gen
+
+# Options
+-n
+--name
+  project name
+-s
+--sfc
+  Generate sfc-style project templates
+-t
+--tsx
+  Generate tsx-style project templates
+-l
+--locale
+  Need to support internationalization
 ```
 
-### babel
+#### Create a component template file
 
-To configure `babel`, first specify the target browser in `package.json`
+```shell
+varlet-cli create
 
-```json
-{
-  "browserslist": [
-    "Chrome >= 54",
-    "iOS >= 10"
-  ]
-}
+# Options
+-n
+--name
+  project name
+-s
+--sfc
+  Generate sfc-style component
+-t
+--tsx
+  Generate tsx-style component
+-l
+--locale
+  Need to support internationalization
 ```
 
-create `babel.config,js`
+### Note before release
 
-```js
-// babel.config.js
-module.exports = {
-  presets: [
-    [
-      '@varlet/cli/preset',
-      {
-        loose: process.env.NODE_ENV === 'compile',
-      },
-    ],
-  ],
-}
-```
+- 1.`npm` repository registry must set to `npm` official mirror
+- 2.Execute `npm login` to log in
 
-### git and npm
-
-#### git-hook
-
-`simple-git-hooks`, `lint-staged` cooperate with `eslint`, `stylelint`, `varlet-cli commit-lint` to check before commit, 
-`package.json` configuration is as follows
-
-```json
-{
-  "simple-git-hooks": {
-    "pre-commit": "pnpm exec lint-staged --allow-empty --concurrent false",
-    "commit-msg": "npx --no-install varlet-cli commit-lint $1"
-  },
-  "lint-staged": {
-    "*.{ts,tsx,js,vue,less}": "prettier --write",
-    "*.{ts,tsx,js,vue}": "eslint --fix",
-    "*.{vue,css,less}": "stylelint --fix"
-  },
-  "eslintConfig": {
-    "root": true,
-    "ignorePatterns": [
-      "es/**",
-      "umd/**",
-      "site/**",
-      "public/**",
-      "src/*/__tests__/**",
-      ".varlet/**"
-    ],
-    "extends": [
-      "@varlet"
-    ]
-  },
-  "stylelint": {
-    "extends": [
-      "@varlet/stylelint-config"
-    ],
-    "ignoreFiles": [
-      "es/**",
-      "umd/**",
-      "site/**",
-      "coverage/**",
-      "public/**",
-      "highlight/**"
-    ]
-  }
-}
-```
+### Module Compatible
 
-Mount Git Hooks
+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
 
-```shell
-npx simple-git-hooks
+```js
+import dayjs from 'dayjs/esm'
 ```
 
-create `.prettierignore`
+In order to build `commonjs`, the writing method is
 
-```text
-// .prettierignore
-coverage/**
-es/**
-umd/**
-site/**
-public/**
-src/*/__tests__/**
-*.md
+```js
+import * as dayjs from 'dayjs'
 ```
 
-### typescript
-
-create `tsconfig.json`
-
-```json
-{
-  "compilerOptions": {
-    "strict": true,
-    "downlevelIteration": true,
-    "declaration": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowJs": true,
-    "lib": ["esnext", "dom"],
-    "allowSyntheticDefaultImports": true,
-    "jsx": "preserve"
+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"
   }
 }
 ```
-
-#### Note before release
-
-- 1.The registry of npm must set to the official npm mirror
-- 2.The npm must execute the login command for user login
-
-### Contributors
-
-<a href="https://github.com/varletjs/varlet/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=haoziqaq/varlet" />
-</a>

package/README.md

@@ -3,31 +3,27 @@
 开箱即用的 `Vue3组件库` 快速成型工具，提供了一系列命令和工具去解决组件库开发上的问题
 
 ### 特性
-
-- 1.开箱即用的组件库开发环境
-- 2.开箱即用的组件库编译工具，支持导出 `esm` 和 `umd` 两种模块代码
-- 3.基于配置文件的组件库文档站点,支持百度统计和主题定制
-- 4.支持 `单文件组件(sfc)` 和 `tsx,jsx` 两种风格的组件库编写风格
-- 5.开箱即用的代码检查工具
-- 6.开箱即用的单元测试工具
-- 7.开箱即用的代码发布工具,发布到 npm 和 github, 并自动生成更新日志
-- 8.支持 `Typescript`
-- 9.支持 `暗黑模式`
-- 10.基于 `pnpm`
+- 📦  开箱即用的组件库开发环境
+- 📦  开箱即用的组件库编译工具，支持导出 `esm`, `cjs`, `umd` 三种模块代码
+- 🛠️  基于配置文件的组件库文档站点，支持百度统计和主题定制
+- 🛠️  支持 `sfc` 和 `tsx` 两种风格的组件库编写风格
+- 📦  开箱即用的代码检查工具
+- 📦  开箱即用的单元测试工具
+- 📦  开箱即用的代码发布工具,同时发布到 `npm` 和 `github`, 并自动生成更新日志
+- 💪  支持 `Typescript`
+- 💪  支持 `暗黑模式`
+- 🌍  支持 `国际化`
+- 🚀  基于 `pnpm`
 
 ### 快速开始
 
-`@varlet/cli` 内置了 `单文件组件(sfc)` 和 `tsx, jsx` 两种风格的组件库项目模板，可以通过 `gen` 命令直接生成。
-帮助用户直接进入组件本身的开发，推荐使用 `pnpm` 作为包管理工具。
+`@varlet/cli` 内置了 `sfc` 和 `tsx` 两种风格的组件库项目模板，可以通过 `gen` 命令直接生成。
+方便您直接进入组件库开发。
 
 ```shell
 # 安装命令行工具
 pnpm add @varlet/cli -g
-# 使用 gen 命令生成项目
-varlet-cli gen 项目名
-cd 项目名
-pnpm install
-pnpm dev
+varlet-cli gen
 ```
 
 然后通过简单修改一些组件库模板的基础信息，就可以开始组件库的开发了
@@ -36,169 +32,59 @@ pnpm dev
 
 ### 配置文件
 
-项目根目录下的 `varlet.config.js` 用来管理整个组件库项目的具体细节
+项目根目录下的 `varlet.config.js` 用来管理整个组件库项目的具体细节。
+默认配置可查阅 [varlet.default.config.js](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/varlet.default.config.js)。
+也可以参考 `@varlet/ui` 的 [varlet.config.js](https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/varlet.config.js)
 
 | 参数 | 说明 | 类型 | 默认值 |
 | ----- | -------------- | -------- | ---------- |
+| `name` | 组件库全名，会作为包名 | _string_ | `Varlet` |
+| `namespace` | 组件库命名空间, 会作为组件前缀 | _string_ | `var` |
 | `host` | 开发服务器主机 | _number_ | `localhost` |
 | `port` | 开发服务器端口 | _number_ | `8080` |
-| `name` | 组件库全名	| _string_ | `Varlet` |
-| `namespace` | 组件库命名空间, 会作为组件前缀 | _string_ | `var` |
 | `title` | 文档中组件库的标题 | _string_ | `VARLET` |
 | `logo` | 文档中组件库的logo | _string_ | `-` |
 | `defaultLanguage` | 文档默认语言 | _string_ | `zh-CN` |
 | `useMobile` | 是否显示右侧手机预览 | _boolean_ | `false` |
-| `themes` | 文档主题 | _SiteThemes_ | `-` |
-| `darkThemes` | 暗黑模式文档主题 | _SiteThemes_ | `-` |
-| `highlight` | 文档代码片段样式相关 | _SiteHighlight_ | `-` |
-| `analysis` | 文档统计相关 | _SiteAnalysis_ | `-` |
-| `pc` | pc端文档结构配置 | _SitePC_ | `-` |
-| `mobile` | mobile端文档结构配置 | _SiteMobile_ | `-` |
+| `lightTheme` | 亮色模式文档主题 | _Record<string, any>_ | `-` |
+| `darkTheme` | 暗黑模式文档主题 | _Record<string, any>_ | `-` |
+| `highlight` | 文档代码片段样式相关 | _{ style: string }_ | `-` |
+| `analysis` | 文档统计相关 | _{ baidu: string }_ | `-` |
+| `pc` | pc端文档结构配置 | _Record<string, any>_ | `-` |
+| `mobile` | mobile端文档结构配置 | _Record<string, any>_ | `-` |
 | `moduleCompatible` | 模块兼容配置 | _Record<string, string>_ | `-` |
 
-#### 模块适配对象
+### 自定义页面
 
-一些外部依赖可能需要进行模块语法的适配，以达到可以正确编译到 `commonjs` 和 `esmodule` 的目的，例如 `dayjs` 的 `esmodule` 写法是
+如果想在组件库中插入其他页面，可以在项目根目录下的创建 `pages` 文件夹编写 vue 组件， 用来生成其他的页面。
+目录结构如下：
 
 ```js
-import dayjs from 'dayjs/esm'
-```
-
-而为了构建 `commonjs` 时的写法是
+|-- varlet-ui
+  |-- src
+  |-- docs
+  |-- pages
+    |-- sponsor
+      |-- index.vue
+    |-- contributor
+      |-- locale
+        |-- en-US.ts
+      |-- index.vue
+    |-- changelog
+      |-- locale
+        |-- zh-CN.ts
+        |-- en-US.ts
+      |-- index.vue
+      
+```
+
+生成的路由如下：
 
-```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
-
-主题变量相关，由于默认的主题变量可能时常修改，以 `varlet` 官方文档的主题为准
-
-| 参数 |
-| ----- |
-| `color-body` |
-| `color-bar` |
-| `color-sub-bar` |
-| `color-text` |
-| `color-sub-text` |
-| `color-border` |
-| `color-shadow` |
-| `color-introduce-border` |
-| `color-primary` |
-| `color-link` |
-| `color-type` |
-| `color-progress` |
-| `color-progress-track` |
-| `color-side-bar` |
-| `color-side-bar-active-background` |
-| `color-app-bar` |
-| `color-nav-button-hover-background` |
-| `color-mobile-cell-hover` |
-| `color-pc-language-active` |
-| `color-pc-language-active-background` |
-| `color-mobile-language-active` |
-| `color-mobile-language-active-background` |
-| `color-hl-background` |
-| `color-hl-code` |
-| `color-hl-border` |
-| `color-hl-group-a` |
-| `color-hl-group-b` |
-| `color-hl-group-c` |
-| `color-hl-group-d` |
-| `color-hl-group-e` |
-| `color-hl-group-f` |
-| `color-hl-group-g` |
-| `color-hl-group-h` |
-| `color-hl-group-i` |
-
-#### SiteHighlight
-
-代码片段高亮，基于[highlight.js](https://highlightjs.org/)
-
-| 参数 | 说明 | 类型 | 默认值 |
-| ----- | -------------- | -------- | ---------- |
-| `style` | highlight的css地址 | _string_ | `-` |
-
-#### SiteAnalysis
-
-统计埋点相关
-
-| 参数 | 说明 | 类型 | 默认值 |
-| ----- | -------------- | -------- | ---------- |
-| `baidu` | 百度统计脚本地址 | _string_ | `-` |
-
-#### SitePC, SiteMobile
-
-文档结构部分相关，示例配置如下
-
-```js
-module.exports = {
-  pc: {
-    redirect: '/home',
-    title: {
-      'zh-CN': '一个组件库',
-    },
-    header: {
-      darkMode: null,
-      i18n: null,
-      github: 'https://github.com/varletjs/varlet',
-    },
-    menu: [
-      {
-        text: {
-          'zh-CN': '开发指南',
-        },
-        // 侧边栏菜单目录
-        type: 1,
-      },
-      {
-        text: {
-          'zh-CN': '基本介绍',
-        },
-        doc: 'home',
-        // 索引项目根目录下的md文档
-        type: 3,
-      },
-      {
-        text: {
-          'zh-CN': '基础组件',
-        },
-        type: 1,
-      },
-      {
-        text: {
-          'zh-CN': 'Button 按钮',
-        },
-        doc: 'button',
-        // 索引组件根目录下的md文档
-        type: 2,
-      },
-    ],
-  },
-  mobile: {
-    redirect: '/home',
-    title: {
-      'zh-CN': '一个组件库',
-    },
-    header: {
-      darkMode: null,
-      i18n: null,
-      playground: null,
-      github: 'https://github.com/varletjs/varlet',
-    },
-  },
-}
+```text
+/zh-CN/sponsor
+/en-US/contributor
+/zh-CN/changelog
+/en-US/changelog
 ```
 
 ### 命令相关
@@ -266,132 +152,71 @@ varlet-cli release
 ```
 
 #### 生成一个项目模板
+
 ```shell
-varlet-cli gen <projectName>
+varlet-cli gen
+
+# Options
+-n
+--name
+  项目名
+-s
+--sfc
+  生成 sfc 风格的项目模板
+-t
+--tsx
+  生成 tsx 格式项目
+-l
+--locale
+  需要支持国际化
 ```
 
-### babel
+#### 创建组件模板文件
 
-对 `babel` 进行配置，首先在 `package.json` 中指定目标浏览器
+```shell
+varlet-cli create
 
-```json
-{
-  "browserslist": [
-    "Chrome >= 54",
-    "iOS >= 10"
-  ]
-}
+# Options
+-n
+--name
+  组件名
+-s
+--sfc
+  生成 sfc 风格的组件
+-t
+--tsx
+  生成 tsx 风格的文件
+-l
+--locale
+  需要支持国际化
 ```
 
-创建 `babel.config,js`
+### 发布前注意
 
-```js
-// babel.config.js
-module.exports = {
-  presets: [
-    [
-      '@varlet/cli/preset',
-      {
-        loose: process.env.NODE_ENV === 'compile',
-      },
-    ],
-  ],
-}
-```
+1. `npm` 的仓库源必须指向 `npm` 官方镜像
+2. 执行 `npm login` 进行登录
 
-### git 和 npm
-
-#### git-hook
-
-`simple-git-hooks`，`lint-staged` 配合 `eslint`，`stylelint`，`varlet-cli commit-lint` 做commit前的检查，`package.json` 配置如下
-
-```json
-{
-  "simple-git-hooks": {
-    "pre-commit": "pnpm exec lint-staged --allow-empty --concurrent false",
-    "commit-msg": "npx --no-install varlet-cli commit-lint $1"
-  },
-  "lint-staged": {
-    "*.{ts,tsx,js,vue,less}": "prettier --write",
-    "*.{ts,tsx,js,vue}": "eslint --fix",
-    "*.{vue,css,less}": "stylelint --fix"
-  },
-  "eslintConfig": {
-    "root": true,
-    "ignorePatterns": [
-      "es/**",
-      "umd/**",
-      "site/**",
-      "public/**",
-      "src/*/__tests__/**",
-      ".varlet/**"
-    ],
-    "extends": [
-      "@varlet"
-    ]
-  },
-  "stylelint": {
-    "extends": [
-      "@varlet/stylelint-config"
-    ],
-    "ignoreFiles": [
-      "es/**",
-      "umd/**",
-      "site/**",
-      "coverage/**",
-      "public/**",
-      "highlight/**"
-    ]
-  }
-}
-```
+### 模块适配对象
 
-挂载钩子
+一些外部依赖可能需要进行模块语法的适配，以达到可以正确编译到 `commonjs` 和 `esmodule` 的目的，例如 `dayjs` 的 `esmodule` 写法是
 
-```shell
-npx simple-git-hooks
+```js
+import dayjs from 'dayjs/esm'
 ```
 
-创建 `.prettierignore`
+而为了构建 `commonjs` 时的写法是
 
-```text
-// .prettierignore
-coverage/**
-es/**
-umd/**
-site/**
-public/**
-src/*/__tests__/**
-*.md
+```js
+import * as dayjs from 'dayjs'
 ```
 
-### typescript
-
-创建 `tsconfig.json`
-
-```json
-{
-  "compilerOptions": {
-    "strict": true,
-    "downlevelIteration": true,
-    "declaration": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowJs": true,
-    "lib": ["esnext", "dom"],
-    "allowSyntheticDefaultImports": true,
-    "jsx": "preserve"
+在项目中我们拥抱 `esmodule` 模块使用第一种写法，并做如下配置进行适配
+
+```js
+// varlet.config.js
+module.exports = {
+  moduleCompatible: {
+    "import dayjs from 'dayjs/esm'\n": "import * as dayjs from 'dayjs'\n"
   }
 }
-```
-
-#### 发布前注意
-
-1. `npm` 的仓库源必须指向 `npm` 官方镜像
-2. 执行 `npm login` 进行登录
-
-### Contributors
-
-<a href="https://github.com/varletjs/varlet/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=haoziqaq/varlet" />
-</a>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "2.0.0-alpha.1664332224687",
+  "version": "2.0.0-alpha.1664527888620",
   "description": "cli of varlet",
   "bin": {
     "varlet-cli": "./lib/index.js"
@@ -32,10 +32,10 @@
     "@babel/helper-plugin-utils": "^7.14.5",
     "@babel/preset-env": "^7.14.8",
     "@babel/preset-typescript": "^7.14.5",
-    "@varlet/icons": "2.0.0-alpha.1664332224687",
-    "@varlet/markdown-vite-plugin": "2.0.0-alpha.1664332224687",
-    "@varlet/shared": "2.0.0-alpha.1664332224687",
-    "@varlet/touch-emulator": "2.0.0-alpha.1664332224687",
+    "@varlet/icons": "2.0.0-alpha.1664527888620",
+    "@varlet/markdown-vite-plugin": "2.0.0-alpha.1664527888620",
+    "@varlet/shared": "2.0.0-alpha.1664527888620",
+    "@varlet/touch-emulator": "2.0.0-alpha.1664527888620",
     "@vitejs/plugin-vue": "3.0.1",
     "@vitejs/plugin-vue-jsx": "2.0.0",
     "@vue/babel-plugin-jsx": "1.1.1",
@@ -80,7 +80,7 @@
     "@types/semver": "^7.3.9"
   },
   "peerDependencies": {
-    "@varlet/touch-emulator": "2.0.0-alpha.1664332224687",
+    "@varlet/touch-emulator": "2.0.0-alpha.1664527888620",
     "@vue/runtime-core": "3.2.16",
     "@vue/test-utils": "^2.0.2",
     "clipboard": "^2.0.6",

package/site/components/code-example/CodeExample.vue

@@ -2,7 +2,7 @@
   <div class="var-site-code-example">
     <div class="var-site-code-example__toolbar">
       <var-button text round @click="toggle" v-if="fold && !disabledFold">
-        <var-icon name="xml" size="18" />
+        <var-icon name="xml" size="18"/>
       </var-button>
 
       <var-button
@@ -12,11 +12,11 @@
         round
         v-if="clipboard"
       >
-        <var-icon name="content-copy" size="18" />
+        <var-icon name="content-copy" size="18"/>
       </var-button>
 
       <var-button text round @click="toPlayground" v-if="playground">
-        <var-icon name="code-json" size="18" />
+        <var-icon name="code-json" size="18"/>
       </var-button>
     </div>
     <div
@@ -27,7 +27,7 @@
       :style="{
         height: height >= 0 ? `${height}px` : undefined,
       }"
-      >
+    >
       <slot/>
     </div>
   </div>
@@ -43,7 +43,7 @@ import config from '@config'
 import { defineComponent, nextTick, ref, onMounted } from 'vue'
 import { doubleRaf } from '../utils/elements'
 import { get } from 'lodash-es'
-import { getBrowserTheme, getPCLocationInfo, utoa } from "../../utils";
+import { getBrowserTheme, getPCLocationInfo, utoa } from '../../utils'
 import type { Ref } from 'vue'
 
 let clipId = 0
@@ -68,7 +68,7 @@ export default defineComponent({
     const disabledFold: Ref<boolean> = ref(false)
     const clipboard: Ref = ref(get(config, 'pc.clipboard', {}))
     const height: Ref<number> = ref(-1)
-    const playground: Ref<string | undefined> = ref(!props.playgroundIgnore ? get(config, 'pc.header.playground') : undefined )
+    const playground: Ref<string | undefined> = ref(!props.playgroundIgnore ? get(config, 'pc.header.playground') : undefined)
     let timer: any = null
 
     const toggle = async () => {

package/site/components/utils/components.ts

@@ -1,6 +1,6 @@
-import { createApp, h, onActivated, onDeactivated, onMounted, onUnmounted, ref, Ref } from "vue";
+import { createApp, h, onActivated, onDeactivated, onMounted, onUnmounted, ref, Ref } from 'vue'
 import type { Component } from 'vue'
-import { isArray } from "@varlet/shared";
+import { isArray } from '@varlet/shared'
 
 export interface MountInstance {
   instance: any

package/site/mobile/App.vue

@@ -4,7 +4,7 @@
       <var-app-bar class="app-bar" title-position="left" :title="bigCamelizeComponentName">
         <template #left>
           <var-button v-if="showBackIcon" text round @click="back" color="transparent" text-color="#fff">
-            <var-icon name="chevron-left" class="arrow-left" style="margin-top: 1px" />
+            <var-icon name="chevron-left" class="arrow-left" style="margin-top: 1px"/>
           </var-button>
           <var-button
             v-if="!showBackIcon && github"
@@ -15,7 +15,7 @@
             color="transparent"
             text-color="#fff"
           >
-            <var-icon name="github" class="github" style="margin-top: 1px" />
+            <var-icon name="github" class="github" style="margin-top: 1px"/>
           </var-button>
         </template>
         <template #right>
@@ -44,14 +44,14 @@
             @click.stop="showMenu = true"
             v-if="languages"
           >
-            <var-icon name="translate" class="i18n" />
-            <var-icon name="chevron-down" class="arrow-down" />
+            <var-icon name="translate" class="i18n"/>
+            <var-icon name="chevron-down" class="arrow-down"/>
           </var-button>
         </template>
       </var-app-bar>
     </header>
     <div class="router-view__block">
-      <router-view />
+      <router-view/>
     </div>
 
     <transition name="site-menu">
@@ -84,7 +84,7 @@ import {
   Theme,
   watchLang,
   watchTheme
-} from "../utils";
+} from '../utils'
 import { bigCamelize } from '@varlet/shared'
 import { get } from 'lodash-es'
 
@@ -220,6 +220,7 @@ body {
     transform: translateY(-10px);
     opacity: 0;
   }
+
   &-menu-enter-active,
   &-menu-leave-active {
     transition-property: opacity, transform;

package/site/pc/Layout.vue

@@ -7,15 +7,9 @@ import context from '../components/context'
 import { nextTick, onMounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { get } from 'lodash-es'
-import { getPCLocationInfo, MenuTypes } from "../utils";
+import { getPCLocationInfo, MenuTypes, type Menu } from '../utils'
 import type { Ref } from 'vue'
 
-export interface Menu {
-  doc: string
-  text: Record<string, string>
-  type: MenuTypes
-}
-
 const menu: Ref<Menu[]> = ref(get(config, 'pc.menu', []))
 const useMobile = ref(get(config, 'useMobile'))
 const mobileRedirect = get(config, 'mobile.redirect')
@@ -94,7 +88,7 @@ watch(
 
 <template>
   <div class="varlet-site">
-    <app-header :language="language" />
+    <app-header :language="language"/>
 
     <div class="varlet-site-content">
       <app-sidebar
@@ -109,7 +103,7 @@ watch(
         ref="doc"
         :class="[!useMobile && 'varlet-site-doc-container--pc-only']"
       >
-        <router-view />
+        <router-view/>
       </div>
 
       <app-mobile
@@ -127,7 +121,8 @@ watch(
     @click-overlay="confirmClose"
   >
     <div class="varlet-site-playground-container">
-      <iframe id="playground" class="varlet-site-playground-iframe" :src="context.playgroundURL" frameborder="0"></iframe>
+      <iframe id="playground" class="varlet-site-playground-iframe" :src="context.playgroundURL"
+              frameborder="0"></iframe>
     </div>
   </var-popup>
 </template>
@@ -413,7 +408,7 @@ iframe {
         margin-bottom: 30px;
         box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
 
-        &:first-child{
+        &:first-child {
           margin-top: 30px;
         }
       }

package/site/pc/components/AppHeader.vue

@@ -2,7 +2,7 @@
 import config from '@config'
 import { ref, computed, defineComponent } from 'vue'
 import { get } from 'lodash-es'
-import { getBrowserTheme, getPCLocationInfo, removeEmpty, setTheme, Theme, watchTheme } from "../../utils";
+import { getBrowserTheme, getPCLocationInfo, removeEmpty, setTheme, Theme, watchTheme } from '../../utils'
 import { useRouter } from 'vue-router'
 import AnimationBox from './AnimationBox.vue'
 import type { Ref, ComputedRef } from 'vue'
@@ -68,7 +68,7 @@ export default defineComponent({
     const open = (value: string) => {
       setTimeout(() => {
         window.location.href = value
-      }, 350);
+      }, 350)
     }
 
     watchTheme((theme, from) => {
@@ -111,8 +111,8 @@ export default defineComponent({
 <template>
   <div class="varlet-site-header">
     <div class="varlet-site-header__lead">
-      <animation-box class="varlet-site-header__logo"  @click="backRoot" />
-      <div class="varlet-site-header__title" v-if="title"  @click="backRoot">{{ title }}</div>
+      <animation-box class="varlet-site-header__logo" @click="backRoot"/>
+      <div class="varlet-site-header__title" v-if="title" @click="backRoot">{{ title }}</div>
     </div>
 
     <div class="varlet-site-header__tail">
@@ -123,7 +123,7 @@ export default defineComponent({
         v-if="versionItems"
       >
         <span style="font-size: 14px;">{{ currentVersion }}</span>
-        <var-icon name="chevron-down" />
+        <var-icon name="chevron-down"/>
         <transition name="fade">
           <div
             class="varlet-site-header__animation-list varlet-site-header__animation-versions var-site-elevation--5"
@@ -143,10 +143,10 @@ export default defineComponent({
       </div>
 
       <a class="varlet-site-header__link" target="_blank" :href="playground" v-ripple v-if="playground">
-        <var-icon name="code-json" :size="24" />
+        <var-icon name="code-json" :size="24"/>
       </a>
       <a class="varlet-site-header__link" target="_blank" :href="github" v-ripple v-if="github">
-        <var-icon name="github" :size="28" />
+        <var-icon name="github" :size="28"/>
       </a>
       <div class="varlet-site-header__theme" v-ripple v-if="darkMode" @click="toggleTheme">
         <var-icon
@@ -164,8 +164,8 @@ export default defineComponent({
         @mouseleave="isOpenLanguageMenu = false"
         v-if="languages"
       >
-        <var-icon name="translate" size="26px" />
-        <var-icon name="chevron-down" />
+        <var-icon name="translate" size="26px"/>
+        <var-icon name="chevron-down"/>
         <transition name="fade">
           <div
             class="varlet-site-header__animation-list var-site-elevation--5"
@@ -178,7 +178,7 @@ export default defineComponent({
               :key="key"
               :class="{ 'varlet-site-header__animation-list--active': language === key }"
               @click="handleLanguageChange(key)"
-              >{{ value }}
+            >{{ value }}
             </var-cell>
           </div>
         </transition>
@@ -361,7 +361,7 @@ export default defineComponent({
     }
   }
 
-   &__animation-versions {
+  &__animation-versions {
     left: -7px;
   }
 }

package/site/pc/components/AppSidebar.vue

@@ -24,10 +24,9 @@
 </template>
 
 <script lang="ts">
-import { MenuTypes } from '../../utils'
+import { MenuTypes, type Menu } from '../../utils'
 import { reactive, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import type { Menu } from '../Layout.vue'
 
 export default defineComponent({
   name: 'AppSidebar',

package/site/pc/pages/index/index.vue

@@ -4,7 +4,7 @@ import config from '@config'
 import { get } from 'lodash-es'
 import { ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { getBrowserTheme, setTheme, Theme } from "../../../utils";
+import { getBrowserTheme, setTheme, Theme } from '../../../utils'
 import { getPCLocationInfo, watchTheme } from '@varlet/cli/site/utils'
 import type { Ref } from 'vue'
 
@@ -75,17 +75,17 @@ watch(() => route.path, setLocale, { immediate: true })
     <div class="varlet-doc-index__layout">
       <div class="varlet-doc-index__logo-container">
         <div class="varlet-doc-index__logo-background-mask"></div>
-        <animation-box class="varlet-doc-index__logo" />
+        <animation-box class="varlet-doc-index__logo"/>
       </div>
 
       <div class="varlet-doc-index__title">{{ title }}</div>
       <div class="varlet-doc-index__description">{{ indexPage.description[language] }}</div>
       <div class="varlet-doc-index__link-button-group">
         <var-button class="varlet-doc-index__link-button" text outline @click="goGithub">
-          <var-icon name="github" size="24px" />
+          <var-icon name="github" size="24px"/>
         </var-button>
         <var-button class="varlet-doc-index__link-button" text outline v-if="darkMode" @click="toggleTheme">
-          <var-icon size="24px" :name="currentTheme === 'lightTheme' ? 'white-balance-sunny' : 'weather-night'" />
+          <var-icon size="24px" :name="currentTheme === 'lightTheme' ? 'white-balance-sunny' : 'weather-night'"/>
         </var-button>
         <var-button
           class="varlet-doc-index__link-button"
@@ -94,11 +94,11 @@ watch(() => route.path, setLocale, { immediate: true })
           v-if="languages"
           @click="toggleLanguages"
         >
-          <var-icon name="translate" size="24px" />
+          <var-icon name="translate" size="24px"/>
         </var-button>
         <var-button class="varlet-doc-index__link-button" type="primary" style="line-height: 1.2" @click="getStar">
           <span class="varlet-doc-index__link-button-text">{{ indexPage.started[language] }}</span>
-          <var-icon style="transform: rotate(-90deg)" name="arrow-down" size="24px" />
+          <var-icon style="transform: rotate(-90deg)" name="arrow-down" size="24px"/>
         </var-button>
       </div>
 

package/site/useProgress.ts

@@ -1,7 +1,7 @@
 import Progress from './components/progress'
 import config from '@config'
 import { reactive } from 'vue'
-import { getBrowserTheme, mountInstance, Theme, watchTheme } from "./utils";
+import { getBrowserTheme, mountInstance, Theme, watchTheme } from './utils'
 import { get } from 'lodash-es'
 
 function getColor(theme?: Theme) {

package/site/utils.ts

@@ -39,6 +39,12 @@ export function isPhone() {
   return /Android|webOS|iPhone|iPod|BlackBerry|Pad/i.test(navigator.userAgent)
 }
 
+export interface Menu {
+  doc: string
+  text: Record<string, string>
+  type: MenuTypes
+}
+
 export enum MenuTypes {
   TITLE = 1,
   COMPONENT = 2,

package/template/generators/config/default/base/package.json

@@ -70,7 +70,7 @@
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm exec lint-staged --allow-empty --concurrent false",
-    "commit-msg": "npx --no-install varlet-cli commit-lint $1"
+    "commit-msg": "pnpm exec varlet-cli commit-lint $1"
   },
   "eslintConfig": {
     "root": true,

package/template/generators/config/i18n/base/package.json

@@ -70,7 +70,7 @@
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm exec lint-staged --allow-empty --concurrent false",
-    "commit-msg": "npx --no-install varlet-cli commit-lint $1"
+    "commit-msg": "pnpm exec varlet-cli commit-lint $1"
   },
   "eslintConfig": {
     "root": true,

package/template/generators/config/i18n/sfc/src/button/example/BasicUse.vue

@@ -3,7 +3,7 @@ import VarButton from '..'
 import { watchLang } from '@varlet/cli/site/utils'
 import { pack, use } from './locale'
 
-watchLang(use)
+watchLang(use, 'pc')
 </script>
 
 <template>

package/varlet.default.config.js

@@ -152,7 +152,7 @@ module.exports = {
       },
       versions: null,
       github: 'https://github.com/varletjs/varlet',
-      playground: 'https://varlet-ui-playground-git-dev-varletjs.vercel.app/',
+      playground: 'https://varlet-ui-playground-git-dev-varletjs.vercel.app',
       darkMode: true,
     },
     clipboard: {