feat(cli): add babel-presets

affects: @varlet/cli, @varlet/ui
varletjs · Jul 29, 2021 · 1c5825d · 1c5825d
1 parent fbbd235
commit 1c5825d
Show file tree

Hide file tree

Showing 13 changed files with 86 additions and 91 deletions.
diff --git a/packages/varlet-cli/lib/index.js b/packages/varlet-cli/lib/index.js
@@ -20,5 +20,6 @@ commander_1.command('jest')
     .description('Run Jest in work directory')
     .option('-w, --watch', 'Watch files change auto jest')
     .option('-c, --component <componentName>', 'Test a specific component')
+    .option('-cc --clearCache', 'Clear test cache')
     .action(jest_1.jest);
 commander_1.parse();
diff --git a/packages/varlet-cli/package.json b/packages/varlet-cli/package.json
@@ -16,6 +16,7 @@
     "site",
     "tsconfig.json",
     "varlet.default.config.js",
+    "preset.js",
     "CHANGELOG.md"
   ],
   "repository": {
@@ -32,19 +33,16 @@
   "gitHead": "7638540be5f5159578bc7a616e365f1bb6d0494f",
   "dependencies": {
     "@babel/core": "^7.14.8",
-    "@babel/helper-plugin-utils": "^7.14.5",
     "@babel/plugin-transform-runtime": "^7.14.5",
-    "@babel/plugin-transform-typescript": "^7.12.17",
     "@babel/preset-env": "^7.14.8",
     "@babel/preset-typescript": "^7.14.5",
     "@varlet/markdown-loader": "^1.9.0",
-    "@vue/babel-plugin-jsx": "1.0.3",
     "@varlet/ui": "^1.11.1",
-    "@vue/babel-plugin-jsx": "1.0.3",
+    "@vue/babel-plugin-jsx": "^1.0.6",
     "@vue/compiler-sfc": "^3.1.4",
     "@vue/test-utils": "^2.0.0-rc.6",
     "autoprefixer": "9",
-    "babel-jest": "^26.6.3",
+    "babel-jest": "26.6.3",
     "babel-loader": "^8.2.2",
     "babel-plugin-import": "^1.13.3",
     "chalk": "^4.1.0",

diff --git a/packages/varlet-cli/preset.js b/packages/varlet-cli/preset.js
@@ -0,0 +1,3 @@
+const babelConfig = require('./lib/config/babel.config')
+
+module.exports = (api, options) => babelConfig(api, options)
diff --git a/packages/varlet-cli/src/commands/jest.ts b/packages/varlet-cli/src/commands/jest.ts
@@ -1,13 +1,16 @@
+import logger from '../shared/logger'
 import { runCLI } from 'jest'
 import { CWD, JEST_CONFIG } from '../shared/constant'
-import logger from '../shared/logger'
 
-export async function jest(cmd: { watch: boolean; component: string }) {
+export async function jest(cmd: { watch: boolean; component: string; clearCache: boolean }) {
+  process.env.NODE_ENV = 'test'
+
   const config = {
     rootDir: CWD,
     watch: cmd.watch,
+    clearCache: cmd.clearCache,
     config: JEST_CONFIG,
-    testMatch: cmd.component && [`**/${cmd.component}/__tests__/*.[jt]s`],
+    testMatch: cmd.component && [`/**/${cmd.component}/__tests__/*.[jt]s`],
   }
 
   try {

diff --git a/packages/varlet-cli/src/compiler/compileScript.ts b/packages/varlet-cli/src/compiler/compileScript.ts
@@ -25,17 +25,6 @@ export function replaceTSExt(script: string) {
 export async function compileScript(script: string, file: string) {
   let { code } = (await transformAsync(script, {
     filename: file,
-    presets: [
-      [
-        '@babel/preset-env',
-        {
-          modules: false,
-        },
-      ],
-      '@babel/preset-typescript',
-      require('../config/babel-sfc-ts-transform'),
-    ],
-    plugins: ['@babel/plugin-transform-runtime', '@vue/babel-plugin-jsx'],
   })) as BabelFileResult
   code = replaceStyleExt(code as string)
   code = replaceVueExt(code as string)

diff --git a/packages/varlet-cli/src/config/babel.config.ts b/packages/varlet-cli/src/config/babel.config.ts
@@ -0,0 +1,48 @@
+import { ConfigAPI } from '@babel/core'
+
+type PresetOption = {
+  loose?: boolean
+  enableObjectSlots?: boolean
+}
+
+module.exports = (api?: ConfigAPI, options: PresetOption = {}) => {
+  if (api) {
+    api.cache.never()
+  }
+
+  const isTest = process.env.NODE_ENV === 'test'
+
+  return {
+    presets: [
+      [
+        '@babel/preset-env',
+        {
+          modules: isTest ? 'commonjs' : false,
+          loose: options.loose ?? !isTest,
+        },
+      ],
+      '@babel/preset-typescript',
+      require('./babel.sfc.transform'),
+    ],
+    plugins: [
+      '@babel/plugin-transform-runtime',
+      [
+        'import',
+        {
+          libraryName: '@varlet/ui',
+          libraryDirectory: 'es',
+          style: true,
+        },
+        '@varlet/ui',
+      ],
+      [
+        '@vue/babel-plugin-jsx',
+        {
+          enableObjectSlots: options.enableObjectSlots,
+        },
+      ],
+    ],
+  }
+}
+
+export default module.exports
diff --git a/...-cli/src/config/babel-sfc-ts-transform.ts → ...let-cli/src/config/babel.sfc.transform.ts b/...-cli/src/config/babel-sfc-ts-transform.ts → ...let-cli/src/config/babel.sfc.transform.ts
@@ -6,7 +6,7 @@ module.exports = declare(() => ({
     {
       test: (file: string) => {
         if (/\.vue$/.test(file)) {
-          const code = readFileSync(file, { encoding: 'utf8' })
+          const code = readFileSync(file, 'utf8')
           return code.includes('lang="ts"') || code.includes("lang='ts'")
         }
 

diff --git a/packages/varlet-cli/src/config/jest.config.ts b/packages/varlet-cli/src/config/jest.config.ts
@@ -1,4 +1,11 @@
-import { JEST_MEDIA_MOCK, JEST_STYLE_MOCK, DOCS_DIR_NAME, TESTS_DIR_NAME, EXAMPLE_DIR_NAME } from '../shared/constant'
+import {
+  JEST_MEDIA_MOCK,
+  JEST_STYLE_MOCK,
+  DOCS_DIR_NAME,
+  TESTS_DIR_NAME,
+  EXAMPLE_DIR_NAME,
+  // CWD
+} from '../shared/constant'
 
 module.exports = {
   moduleNameMapper: {
@@ -7,15 +14,15 @@ module.exports = {
   },
   transform: {
     '\\.(vue)$': 'vue-jest',
-    '\\.(js|ts)$': 'babel-jest',
+    '\\.(js|jsx|ts|tsx)$': 'babel-jest',
   },
   collectCoverage: true,
   collectCoverageFrom: [
-    'src/**/*.{js,ts,vue}',
+    'src/**/*.{js,jsx,ts,tsx,vue}',
     `!**/${EXAMPLE_DIR_NAME}/**`,
     `!**/${DOCS_DIR_NAME}/**`,
     `!**/${TESTS_DIR_NAME}/**`,
   ],
-  moduleFileExtensions: ['js', 'vue', 'ts'],
-  transformIgnorePatterns: ['/node_modules/'],
+  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'vue'],
+  transformIgnorePatterns: ['/node_modules/(?!(@varlet/cli))'],
 }
diff --git a/packages/varlet-cli/src/config/webpack.base.config.ts b/packages/varlet-cli/src/config/webpack.base.config.ts
@@ -68,37 +68,8 @@ export const BASE_CONFIG = {
       },
       {
         test: /\.(js|ts|jsx|tsx)$/,
-        use: [
-          {
-            loader: 'babel-loader',
-            options: {
-              presets: [
-                [
-                  '@babel/preset-env',
-                  {
-                    modules: false,
-                  },
-                ],
-                '@babel/preset-typescript',
-                require('./babel-sfc-ts-transform'),
-              ],
-              plugins: [
-                '@babel/plugin-transform-runtime',
-                [
-                  'import',
-                  {
-                    libraryName: '@varlet/ui',
-                    libraryDirectory: 'es',
-                    style: true,
-                  },
-                  '@varlet/ui',
-                ],
-                '@vue/babel-plugin-jsx',
-              ],
-            },
-          },
-        ],
-        exclude: /node_modules/,
+        use: ['babel-loader'],
+        exclude: /node_modules\/(?!(@varlet\/cli))/,
       },
       {
         test: /\.md$/,

diff --git a/packages/varlet-cli/src/index.ts b/packages/varlet-cli/src/index.ts
@@ -24,6 +24,7 @@ command('jest')
   .description('Run Jest in work directory')
   .option('-w, --watch', 'Watch files change auto jest')
   .option('-c, --component <componentName>', 'Test a specific component')
+  .option('-cc --clearCache', 'Clear test cache')
   .action(jest)
 
 parse()
diff --git a/packages/varlet-ui/babel.config.js b/packages/varlet-ui/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@varlet/cli/preset'],
+}
diff --git a/packages/varlet-ui/src/button/example/index.vue b/packages/varlet-ui/src/button/example/index.vue
@@ -58,8 +58,6 @@
   <app-type>{{ pack.event }}</app-type>
   <var-button type="success" @click="handleClick">{{ pack.click }}</var-button>
   <var-button type="success" @touchstart="handleTouchstart">{{ pack.touchstart }}</var-button>
-
-  <Test />
 </template>
 
 <script>

diff --git a/yarn.lock b/yarn.lock
@@ -139,17 +139,6 @@
     browserslist "^4.16.6"
     semver "^6.3.0"
 
-"@babel/helper-create-class-features-plugin@^7.12.17":
-  version "7.12.17"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.12.17.tgz#704b69c8a78d03fb1c5fcc2e7b593f8a65628944"
-  integrity sha512-I/nurmTxIxHV0M+rIpfQBF1oN342+yvl2kwZUrQuOClMamHF1w5tknfZubgNOLRoA73SzBFAdFcpb4M9HwOeWQ==
-  dependencies:
-    "@babel/helper-function-name" "^7.12.13"
-    "@babel/helper-member-expression-to-functions" "^7.12.17"
-    "@babel/helper-optimise-call-expression" "^7.12.13"
-    "@babel/helper-replace-supers" "^7.12.13"
-    "@babel/helper-split-export-declaration" "^7.12.13"
-
 "@babel/helper-create-class-features-plugin@^7.14.5", "@babel/helper-create-class-features-plugin@^7.14.6":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.14.8.tgz#a6f8c3de208b1e5629424a9a63567f56501955fc"
@@ -253,7 +242,7 @@
   dependencies:
     "@babel/types" "^7.12.1"
 
-"@babel/helper-member-expression-to-functions@^7.12.13", "@babel/helper-member-expression-to-functions@^7.12.17":
+"@babel/helper-member-expression-to-functions@^7.12.13":
   version "7.12.17"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.12.17.tgz#f82838eb06e1235307b6d71457b6670ff71ee5ac"
   integrity sha512-Bzv4p3ODgS/qpBE0DiJ9qf5WxSmrQ8gVTe8ClMfwwsY2x/rhykxxy3bXzG7AGTnPB2ij37zGJ/Q/6FruxHxsxg==
@@ -831,13 +820,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-syntax-typescript@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.12.13.tgz#9dff111ca64154cef0f4dc52cf843d9f12ce4474"
-  integrity sha512-cHP3u1JiUiG2LFDKbXnwVad81GvfyIOmCD6HIEId6ojrY0Drfy2q1jw7BwN7dE84+kTnBjLkXoL3IEy/3JPu2w==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
 "@babel/plugin-syntax-typescript@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.14.5.tgz#b82c6ce471b165b5ce420cf92914d6fb46225716"
@@ -1100,15 +1082,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-transform-typescript@^7.12.17":
-  version "7.12.17"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.12.17.tgz#4aa6a5041888dd2e5d316ec39212b0cf855211bb"
-  integrity sha512-1bIYwnhRoetxkFonuZRtDZPFEjl1l5r+3ITkxLC3mlMaFja+GQFo94b/WHEPjqWLU9Bc+W4oFZbvCGe9eYMu1g==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.12.17"
-    "@babel/helper-plugin-utils" "^7.12.13"
-    "@babel/plugin-syntax-typescript" "^7.12.13"
-
 "@babel/plugin-transform-typescript@^7.14.5":
   version "7.14.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.14.6.tgz#6e9c2d98da2507ebe0a883b100cde3c7279df36c"
@@ -3155,10 +3128,10 @@
   resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.0.2.tgz#9b9c691cd06fc855221a2475c3cc831d774bc7dc"
   integrity sha512-hz4R8tS5jMn8lDq6iD+yWL6XNB699pGIVLk7WSJnn1dbpjaazsjZQkieJoRX6gW5zpYSCFqQ7jUquPNY65tQYA==
 
-"@vue/[email protected].3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.0.3.tgz#ad5ee86ebc9fc40900add9914534e223c719eace"
-  integrity sha512-+52ZQFmrM0yh61dQlgwQlfHZXmYbswbQEL25SOSt9QkjegAdfIGu87oELw0l8H6cuJYazZCiNjPR9eU++ZIbxg==
+"@vue/babel-plugin-jsx@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.0.6.tgz#184bf3541ab6efdbe5079ab8b20c19e2af100bfb"
+  integrity sha512-RzYsvBhzKUmY2YG6LoV+W5PnlnkInq0thh1AzCmewwctAgGN6e9UFon6ZrQQV1CO5G5PeME7MqpB+/vvGg0h4g==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
     "@babel/plugin-syntax-jsx" "^7.0.0"
@@ -3979,7 +3952,7 @@ azure-devops-node-api@^10.2.2:
     tunnel "0.0.6"
     typed-rest-client "^1.8.4"
 
-babel-jest@^26.6.3:
+babel-jest@26.6.3, babel-jest@^26.6.3:
   version "26.6.3"
   resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-26.6.3.tgz#d87d25cb0037577a0c89f82e5755c5d293c01056"
   integrity sha512-pl4Q+GAVOHwvjrck6jKjvmGhnO3jHX/xuB9d27f+EJZ/6k+6nMuPjorrYp7s++bKKdANwzElBWnLWaObvTnaZA==
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		const babelConfig = require('./lib/config/babel.config')

		module.exports = (api, options) => babelConfig(api, options)