fix(icons): 子包@varlet/icons完成 svg待选

affects: @varlet/cli, @varlet/icons, @varlet/ui
varletjs · Dec 25, 2020 · 76c8cbd · 76c8cbd
1 parent 226bc04
commit 76c8cbd
Show file tree

Hide file tree

Showing 26 changed files with 824 additions and 421 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,7 +8,10 @@ node_modules
 packages/varlet-cli/lib
 packages/varlet-cli/site/mobile/routes.ts
 packages/varlet-cli/site/pc/routes.ts
+
 packages/varlet-ui/site
 packages/varlet-ui/es
 packages/varlet-ui/cjs
 packages/varlet-ui/umd
+
+packages/varlet-icons/dist
diff --git a/package.json b/package.json
@@ -72,7 +72,6 @@
     "prettier": "^2.1.2",
     "stylelint": "^13.7.2",
     "typescript": "^4.0.5",
-    "vue": "3.0.2",
-    "vue-router": "4.0.0-rc.1"
+    "vue": "3.0.2"
   }
 }
diff --git a/packages/varlet-cli/README.md b/packages/varlet-cli/README.md
@@ -3,8 +3,8 @@ varlet cli是一个基于vue3的组件库构建命令行，可以快速搭建一
 
 ## 快速上手
 ```
-npm安装:npm i typescript [email protected] [email protected] @varlet/cli -D
-yarn安装:yarn add typescript [email protected] [email protected] @varlet/cli -D
+npm安装:npm i typescript [email protected]  @varlet/cli -D
+yarn安装:yarn add typescript [email protected]  @varlet/cli -D
 ```
 
 ```

diff --git a/packages/varlet-cli/package.json b/packages/varlet-cli/package.json
@@ -11,7 +11,6 @@
   ],
   "author": "haoziqaq <[email protected]>",
   "license": "MIT",
-  "main": "lbd/index.js",
   "files": [
     "lib",
     "site",
@@ -38,6 +37,7 @@
     "@babel/preset-env": "^7.12.1",
     "@babel/preset-typescript": "^7.12.1",
     "@testing-library/vue": "^6.0.0",
+    "@varlet/markdown-loader": "^0.6.0",
     "@vue/compiler-sfc": "^3.0.2",
     "autoprefixer": "8.0.0",
     "babel-loader": "^8.1.0",
@@ -62,7 +62,8 @@
     "style-loader": "^2.0.0",
     "ts-loader": "^8.0.7",
     "vue-loader": "^16.0.0-beta.9",
-    "webpack": "4",
+    "vue-router": "4.0.0-rc.1",
+    "webpack": "4.44.2",
     "webpack-dev-server": "^3.11.0",
     "webpack-merge": "^5.3.0",
     "webpackbar": "^5.0.0-3"
@@ -76,7 +77,6 @@
     "@types/webpack-dev-server": "^3.11.1"
   },
   "peerDependencies": {
-    "vue": ">=3.0.2",
-    "vue-router": ">=4.0.0-rc.1"
+    "vue": ">=3.0.2"
   }
 }
diff --git a/packages/varlet-cli/src/commands/build.ts b/packages/varlet-cli/src/commands/build.ts
@@ -1,4 +1,4 @@
-import webpack from 'webpack'
+import webpack, { Stats } from 'webpack'
 import logger from '../shared/logger'
 import { buildMobileSiteRoutes, buildPcSiteRoutes } from '../compiler/compileRoutes'
 import { getBuildConfig } from '../config/webpack.build.config'
@@ -7,19 +7,16 @@ import { pathExistsSync, writeFileSync } from 'fs-extra'
 import { VARLET_CONFIG } from '../shared/constant'
 
 export async function build() {
-  setProd()
+	setProd()
 
-  !pathExistsSync(VARLET_CONFIG) && writeFileSync(VARLET_CONFIG, 'module.exports = {}')
+	!pathExistsSync(VARLET_CONFIG) && writeFileSync(VARLET_CONFIG, 'module.exports = {}')
 
-  await Promise.all([
-    buildMobileSiteRoutes(),
-    buildPcSiteRoutes()
-  ])
+	await Promise.all([buildMobileSiteRoutes(), buildPcSiteRoutes()])
 
-  const config = getBuildConfig()
+	const config = getBuildConfig()
 
-  webpack(config, (err, stats) => {
-    err && logger.error(err.toString())
-    stats.hasErrors() && logger.error(stats)
-  })
+	webpack(config, (err, stats: Stats) => {
+		err && logger.error(err.toString())
+		stats?.hasErrors() && logger.error(stats)
+	})
 }
diff --git a/packages/varlet-cli/src/compiler/compileModule.ts b/packages/varlet-cli/src/compiler/compileModule.ts
@@ -7,76 +7,67 @@ import { compileLibraryEntry, compileScriptFile } from './compileScript'
 import { buildStyleEntry, compileLess } from './compileStyle'
 import { setProd } from '../shared/env'
 import { getUmdConfig } from '../config/webpack.umd.config'
-import webpack from 'webpack'
+import webpack, { Stats } from 'webpack'
 import logger from '../shared/logger'
 
 export function compileUMD() {
-  return new Promise((resolve, reject) => {
-    setProd()
-    const config = getUmdConfig()
+	return new Promise((resolve, reject) => {
+		setProd()
+		const config = getUmdConfig()
 
-    webpack(config, (err, stats) => {
-      if (err) {
-        logger.error(err.toString())
-        reject()
-      }
-      if (stats.hasErrors()) {
-        logger.error(stats)
-        reject()
-      }
-      if (!err && !stats.hasErrors()) {
-        resolve()
-      }
-    })
-  })
+		webpack(config, (err, stats: Stats) => {
+			if (err) {
+				logger.error(err.toString())
+				reject()
+			}
+			if (stats?.hasErrors()) {
+				logger.error(stats)
+				reject()
+			}
+			if (!err && !stats?.hasErrors()) {
+				resolve()
+			}
+		})
+	})
 }
 
 export async function compileDir(dir: string, modules: string | boolean = false) {
-  const dirs = await readdir(dir)
-  await Promise.all(
-    dirs.map((filename) => {
-      const filePath = resolve(dir, filename)
-      ;[
-        TESTS_DIR_NAME,
-        EXAMPLE_DIR_NAME,
-        DOCS_DIR_NAME
-      ].includes(filename) && removeSync(filePath)
-      return compileFile(filePath, modules)
-    })
-  )
+	const dirs = await readdir(dir)
+	await Promise.all(
+		dirs.map((filename) => {
+			const filePath = resolve(dir, filename)
+			;[TESTS_DIR_NAME, EXAMPLE_DIR_NAME, DOCS_DIR_NAME].includes(filename) && removeSync(filePath)
+			return compileFile(filePath, modules)
+		})
+	)
 }
 
 export async function compileFile(path: string, modules: string | boolean = false) {
-  isSFC(path) && await compileSFC(path, modules)
-  isScript(path) && await compileScriptFile(path, modules)
-  isLess(path) && await compileLess(path)
-  isDir(path) && await compileDir(path)
+	isSFC(path) && (await compileSFC(path, modules))
+	isScript(path) && (await compileScriptFile(path, modules))
+	isLess(path) && (await compileLess(path))
+	isDir(path) && (await compileDir(path))
 }
 
 export async function compileModule(modules: string | boolean = false) {
-  if (modules === 'umd') {
-    await compileUMD()
-    return
-  }
+	if (modules === 'umd') {
+		await compileUMD()
+		return
+	}
 
-  const MODULE_DIR: string = modules === 'cjs' ? CJS_DIR : ES_DIR
+	const MODULE_DIR: string = modules === 'cjs' ? CJS_DIR : ES_DIR
 
-  await copy(SRC_DIR, MODULE_DIR)
+	await copy(SRC_DIR, MODULE_DIR)
 
-  const dir: string[] = await readdir(MODULE_DIR)
-  await Promise.all(
-    dir.map((filename: string) => {
-      const path: string = resolve(MODULE_DIR, filename)
+	const dir: string[] = await readdir(MODULE_DIR)
+	await Promise.all(
+		dir.map((filename: string) => {
+			const path: string = resolve(MODULE_DIR, filename)
 
-      isDir(path) && buildStyleEntry(path)
+			isDir(path) && buildStyleEntry(path)
 
-      return isDir(path) ? compileDir(path, modules) : null
-    })
-  )
-  await compileLibraryEntry(
-    MODULE_DIR,
-    await getComponentNames(),
-    await getExportDirNames(),
-    modules
-  )
+			return isDir(path) ? compileDir(path, modules) : null
+		})
+	)
+	await compileLibraryEntry(MODULE_DIR, await getComponentNames(), await getExportDirNames(), modules)
 }
diff --git a/packages/varlet-cli/src/compiler/compileScript.ts b/packages/varlet-cli/src/compiler/compileScript.ts
@@ -10,63 +10,66 @@ export const IMPORT_TS_PATH_RE = /((?<!['"`])import\s+.+from\s+['"]\s*\.{1,2}\/.
 export const REQUIRE_TS_PATH_RE = /(?<!['"`]\s*)(require\s*\(\s*['"]\.{1,2}\/.+\.)ts(\s*['"`]\))(?!\s*['"`])/g
 
 export function replaceVueExt(script: string) {
-  const replacer = (_: any, p1: string, p2: string): string => {
-    return `${p1}.js${p2}`
-  }
-  return script
-    .replace(IMPORT_VUE_PATH_RE, replacer)
-    .replace(REQUIRE_VUE_PATH_RE, replacer)
+	const replacer = (_: any, p1: string, p2: string): string => {
+		return `${p1}.js${p2}`
+	}
+	return script.replace(IMPORT_VUE_PATH_RE, replacer).replace(REQUIRE_VUE_PATH_RE, replacer)
 }
 
 export function replaceTSExt(script: string) {
-  const replacer = (_: any, p1: string, p2: string): string => {
-    return `${p1}js${p2}`
-  }
-  return script
-    .replace(IMPORT_TS_PATH_RE, replacer)
-    .replace(REQUIRE_TS_PATH_RE, replacer)
+	const replacer = (_: any, p1: string, p2: string): string => {
+		return `${p1}js${p2}`
+	}
+	return script.replace(IMPORT_TS_PATH_RE, replacer).replace(REQUIRE_TS_PATH_RE, replacer)
 }
 
 export async function compileScript(script: string, path: string, modules: string | boolean = false) {
-  let { code } = await transformAsync(script, {
-    filename: replaceExt(path, '.ts'),
-    presets: [
-      [require('@babel/preset-env'), {
-        loose: true,
-        modules
-      }],
-      require('@babel/preset-typescript')
-    ],
-    plugins: [
-      require('@babel/plugin-transform-runtime')
-    ]
-  }) as BabelFileResult
-  code = replaceStyleExt(code as string)
-  code = replaceVueExt(code as string)
-  code = replaceTSExt(code as string)
-  removeSync(path)
-  writeFileSync(replaceExt(path, '.js'), code, 'utf8')
+	let { code } = (await transformAsync(script, {
+		filename: replaceExt(path, '.ts'),
+		presets: [
+			[
+				require('@babel/preset-env'),
+				{
+					loose: true,
+					modules,
+				},
+			],
+			require('@babel/preset-typescript'),
+		],
+		plugins: [require('@babel/plugin-transform-runtime')],
+	})) as BabelFileResult
+	code = replaceStyleExt(code as string)
+	code = replaceVueExt(code as string)
+	code = replaceTSExt(code as string)
+	removeSync(path)
+	writeFileSync(replaceExt(path, '.js'), code, 'utf8')
 }
 
 export async function compileScriptFile(path: string, modules: string | boolean = false) {
-  const sources = readFileSync(path, 'utf-8')
-  await compileScript(sources, path, modules)
+	const sources = readFileSync(path, 'utf-8')
+	await compileScript(sources, path, modules)
 }
 
 export async function compileLibraryEntry(
-  dir: string,
-  componentNames: string[],
-  exportDirNames: string[],
-  modules: string | boolean = false
+	dir: string,
+	componentNames: string[],
+	exportDirNames: string[],
+	modules: string | boolean = false
 ) {
-  const imports = exportDirNames.map((exportDirNames: string) => `import ${bigCamelize(exportDirNames)} from './${exportDirNames}'`).join('\n')
-  const requires = exportDirNames.map((exportDirNames: string) => `var ${bigCamelize(exportDirNames)} = require('./${exportDirNames}')`).join('\n')
-  const install = `\
+	const imports = exportDirNames
+		.map((exportDirNames: string) => `import ${bigCamelize(exportDirNames)} from './${exportDirNames}'`)
+		.join('\n')
+	const requires = exportDirNames
+		.map((exportDirNames: string) => `var ${bigCamelize(exportDirNames)} = require('./${exportDirNames}')`)
+		.join('\n')
+	const install = `\
 function install(app) {
-  ${exportDirNames.map((exportDirName: string) => `${bigCamelize(exportDirName)}.install && app.use(${bigCamelize(exportDirName)})`).join('\n  ')}
+  ${exportDirNames
+		.map((exportDirName: string) => `${bigCamelize(exportDirName)}.install && app.use(${bigCamelize(exportDirName)})`)
+		.join('\n  ')}
 }
 `
-  const esExports = `\
+	const esExports = `\
 export {
   ${exportDirNames.map((exportDirName: string) => `${bigCamelize(exportDirName)}`).join(',\n  ')}
 }
@@ -76,32 +79,42 @@ export default {
   ${exportDirNames.map((exportDirName: string) => `${bigCamelize(exportDirName)}`).join(',\n  ')},
 }\
 `
-  const cjsExports = `\
+	const cjsExports = `\
 module.exports = {
   install,
   ${exportDirNames.map((exportDirName: string) => `${bigCamelize(exportDirName)}`).join(',\n  ')}
 }\
 `
-  const template = `\
-${ modules === 'cjs' ? requires : imports }\n
-${ install }
-${ modules === 'cjs' ? cjsExports: esExports }
+	const template = `\
+${modules === 'cjs' ? requires : imports}\n
+${install}
+${modules === 'cjs' ? cjsExports : esExports}
 `
 
-  const cssImports = componentNames.map((componentName: string) => `import './${componentName}/style'`).join('\n')
-  const cssRequires = componentNames.map((componentName: string) => `require('./${componentName}/style')`).join('\n')
-  const styleTemplate = `\
-${ modules === 'cjs' ? cssRequires : cssImports }
+	const cssImports = componentNames.map((componentName: string) => `import './${componentName}/style'`).join('\n')
+	const cssRequires = componentNames.map((componentName: string) => `require('./${componentName}/style')`).join('\n')
+	const styleTemplate = `\
+${modules === 'cjs' ? cssRequires : cssImports}
 `
 
-  const lessImports = componentNames.map((componentName: string) => `import './${componentName}/style/less'`).join('\n')
-  const lessRequires = componentNames.map((componentName: string) => `require('./${componentName}/style/less')`).join('\n')
-  const lessTemplate = `\
-${ modules === 'cjs' ? lessRequires : lessImports }
+	const umdTemplate = `\
+${modules === 'cjs' ? requires : imports}\n
+${install}
+${cssImports}
+${modules === 'cjs' ? cjsExports : esExports}
 `
-  await Promise.all([
-    writeFile(resolve(dir, 'index.js'), template, 'utf-8'),
-    writeFile(resolve(dir, 'style.js'), styleTemplate, 'utf-8'),
-    writeFile(resolve(dir, 'less.js'), lessTemplate, 'utf-8'),
-  ])
+
+	const lessImports = componentNames.map((componentName: string) => `import './${componentName}/style/less'`).join('\n')
+	const lessRequires = componentNames
+		.map((componentName: string) => `require('./${componentName}/style/less')`)
+		.join('\n')
+	const lessTemplate = `\
+${modules === 'cjs' ? lessRequires : lessImports}
+`
+	await Promise.all([
+		writeFile(resolve(dir, 'index.js'), template, 'utf-8'),
+		writeFile(resolve(dir, 'umdIndex.js'), umdTemplate, 'utf-8'),
+		writeFile(resolve(dir, 'style.js'), styleTemplate, 'utf-8'),
+		writeFile(resolve(dir, 'less.js'), lessTemplate, 'utf-8'),
+	])
 }