From 1c5825d907115b4c1b017c6fb1747cef7f72d29d Mon Sep 17 00:00:00 2001 From: haoziqaq <357229046@qq.com> Date: Fri, 30 Jul 2021 01:37:58 +0800 Subject: [PATCH] feat(cli): add babel-presets affects: @varlet/cli, @varlet/ui --- packages/varlet-cli/lib/index.js | 1 + packages/varlet-cli/package.json | 8 ++-- packages/varlet-cli/preset.js | 3 ++ packages/varlet-cli/src/commands/jest.ts | 9 ++-- .../varlet-cli/src/compiler/compileScript.ts | 11 ----- .../varlet-cli/src/config/babel.config.ts | 48 +++++++++++++++++++ ...ts-transform.ts => babel.sfc.transform.ts} | 2 +- packages/varlet-cli/src/config/jest.config.ts | 17 +++++-- .../src/config/webpack.base.config.ts | 33 +------------ packages/varlet-cli/src/index.ts | 1 + packages/varlet-ui/babel.config.js | 3 ++ .../varlet-ui/src/button/example/index.vue | 2 - yarn.lock | 39 +++------------ 13 files changed, 86 insertions(+), 91 deletions(-) create mode 100644 packages/varlet-cli/preset.js create mode 100644 packages/varlet-cli/src/config/babel.config.ts rename packages/varlet-cli/src/config/{babel-sfc-ts-transform.ts => babel.sfc.transform.ts} (86%) create mode 100644 packages/varlet-ui/babel.config.js diff --git a/packages/varlet-cli/lib/index.js b/packages/varlet-cli/lib/index.js index 465989395b1..f152dfcdaae 100755 --- 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 ', '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 index 6c4712e0e65..fe210600c8f 100644 --- 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 new file mode 100644 index 00000000000..fe33e700d71 --- /dev/null +++ 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 index 7ffecb6faac..88e894919fb 100644 --- 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 index 9a3f9f5c2c3..fa45bcfb255 100644 --- 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 new file mode 100644 index 00000000000..de46424f6b3 --- /dev/null +++ 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/packages/varlet-cli/src/config/babel-sfc-ts-transform.ts b/packages/varlet-cli/src/config/babel.sfc.transform.ts similarity index 86% rename from packages/varlet-cli/src/config/babel-sfc-ts-transform.ts rename to packages/varlet-cli/src/config/babel.sfc.transform.ts index 1de3ebcc78d..f5da405b5f8 100644 --- a/packages/varlet-cli/src/config/babel-sfc-ts-transform.ts +++ b/packages/varlet-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 index f1b0eb3230e..b0d21d5cec1 100644 --- 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 index 3f6c9dc3d2c..f3b61ecffa1 100644 --- 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 index 20ff3df286d..6d62540eaaa 100644 --- 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 ', '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 new file mode 100644 index 00000000000..e99a9bc22e3 --- /dev/null +++ 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 index 843577c7750..8e3e3d66162 100644 --- a/packages/varlet-ui/src/button/example/index.vue +++ b/packages/varlet-ui/src/button/example/index.vue @@ -58,8 +58,6 @@ {{ pack.event }} {{ pack.click }} {{ pack.touchstart }} - -