fix(cli): add the dev command ipv4 prompt, Optimization tips

affects: @varlet/cli

packages/varlet-cli/package.json

@@ -36,11 +36,14 @@
     "@babel/plugin-transform-runtime": "^7.14.5",
     "@babel/preset-env": "^7.14.8",
     "@babel/preset-typescript": "^7.14.5",
+    "@commitlint/cli": "^11.0.0",
+    "@commitlint/config-conventional": "^11.0.0",
     "@varlet/markdown-loader": "^1.9.0",
     "@varlet/ui": "^1.12.0",
     "@vue/babel-plugin-jsx": "^1.0.6",
     "@vue/compiler-sfc": "^3.1.4",
     "@vue/test-utils": "^2.0.0-rc.6",
+    "address": "^1.1.2",
     "autoprefixer": "9",
     "babel-jest": "26.6.3",
     "babel-loader": "^8.2.2",
@@ -50,6 +53,7 @@
     "clean-webpack-plugin": "^3.0.0",
     "clipboard": "^2.0.6",
     "commander": "^6.2.0",
+    "commitizen": "^4.2.2",
     "copy-webpack-plugin": "^9.0.1",
     "css-loader": "^5.0.0",
     "eslint": "^7.30.0",
@@ -63,6 +67,7 @@
     "jest": "^26.6.3",
     "less": "^3.12.2",
     "less-loader": "^7.0.2",
+    "lint-staged": "^10.5.0",
     "lodash": "^4.17.21",
     "ora": "^5.4.0",
     "portfinder": "^1.0.28",
@@ -80,11 +85,7 @@
     "webpack": "^5.23.0",
     "webpack-dev-server": "^3.11.0",
     "webpack-merge": "^5.3.0",
-    "webpackbar": "^5.0.0-3",
-    "@commitlint/cli": "^11.0.0",
-    "@commitlint/config-conventional": "^11.0.0",
-    "commitizen": "^4.2.2",
-    "lint-staged": "^10.5.0"
+    "webpackbar": "^5.0.0-3"
   },
   "devDependencies": {
     "@types/babel__core": "^7.1.12",

packages/varlet-cli/src/commands/compile.ts

@@ -1,4 +1,5 @@
 import ora from 'ora'
+import logger from '../shared/logger'
 import { remove } from 'fs-extra'
 import { ES_DIR, HL_DIR, UMD_DIR } from '../shared/constant'
 import { compileModule } from '../compiler/compileModule'
@@ -9,12 +10,27 @@ export function removeDir() {
   return Promise.all([remove(ES_DIR), remove(HL_DIR), remove(UMD_DIR)])
 }
 
+export async function runTask(taskName: string, task: () => any) {
+  const s = ora().start(`Compiling ${taskName}`)
+  try {
+    await task()
+    s.succeed(`Compilation ${taskName} completed!`)
+  } catch (e) {
+    s.fail(`Compilation ${taskName} failed!`)
+    logger.error(e.toString())
+  }
+}
+
 export async function compile(cmd: { noUmd: boolean }) {
   const s = ora().start('Compile start...')
 
   await removeDir()
-  await Promise.all([compileTypes(), compileTemplateHighlight(), compileModule()])
-  !cmd.noUmd && (await compileModule('umd'))
+  await Promise.all([
+    runTask('types', compileTypes),
+    runTask('template highlight', compileTemplateHighlight),
+    runTask('module', compileModule),
+  ])
+  !cmd.noUmd && (await runTask('umd', () => compileModule('umd')))
 
   s.succeed('Compile success!')
 }

packages/varlet-cli/src/commands/create.ts

@@ -1,6 +1,6 @@
 import logger from '../shared/logger'
-import { bigCamelize, camelize } from '../shared/fsUtils'
-import { mkdirs, pathExistsSync, writeFile } from 'fs-extra'
+import { bigCamelize } from '../shared/fsUtils'
+import { outputFile, pathExistsSync } from 'fs-extra'
 import { resolve } from 'path'
 import { DOCS_DIR_NAME, EXAMPLE_DIR_NAME, SRC_DIR, TESTS_DIR_NAME } from '../shared/constant'
 import { getVarletConfig } from '../config/varlet.config'
@@ -10,6 +10,7 @@ const varletConfig = getVarletConfig()
 
 export async function create(name: string) {
   const namespace = get(varletConfig, 'namespace')
+  const bigCamelizeName = bigCamelize(name)
   const vueTemplate = `\
 <template>
   <div class="${namespace}-${name}"></div>
@@ -19,7 +20,7 @@ export async function create(name: string) {
 import { defineComponent } from 'vue'
 
 export default defineComponent({
-  name: '${bigCamelize(namespace)}${bigCamelize(name)}'
+  name: '${bigCamelize(namespace)}${bigCamelizeName}'
 })
 </script>
 
@@ -30,32 +31,32 @@ export default defineComponent({
 </style>
 `
   const indexTemplate = `\
+import ${bigCamelizeName} from './${bigCamelizeName}.vue'
 import type { App } from 'vue'
-import ${bigCamelize(name)} from './${bigCamelize(name)}.vue'
 
-${bigCamelize(name)}.install = function(app: App) {
-  app.component(${bigCamelize(name)}.name, ${bigCamelize(name)})
+${bigCamelizeName}.install = function(app: App) {
+  app.component(${bigCamelizeName}.name, ${bigCamelizeName})
 }
 
-export const _${bigCamelize(name)}Component = ${bigCamelize(name)}
+export const _${bigCamelizeName}Component = ${bigCamelizeName}
 
-export default ${bigCamelize(name)}
+export default ${bigCamelizeName}
 `
 
   const testsTemplate = `\
 import example from '../example'
-import ${bigCamelize(name)} from '..'
+import ${bigCamelizeName} from '..'
 import { createApp } from 'vue'
 import { mount } from '@vue/test-utils'
 
-test('test ${camelize(name)} example', () => {
+test('test ${name} example', () => {
   const wrapper = mount(example)
   expect(wrapper.html()).toMatchSnapshot()
 })
 
-test('test ${camelize(name)} plugin', () => {
-  const app = createApp({}).use(${bigCamelize(name)})
-  expect(app.component(${bigCamelize(name)}.name)).toBeTruthy()
+test('test ${name} plugin', () => {
+  const app = createApp({}).use(${bigCamelizeName})
+  expect(app.component(${bigCamelizeName}.name)).toBeTruthy()
 })
 `
 
@@ -65,13 +66,13 @@ test('test ${camelize(name)} plugin', () => {
 </template>
 
 <script>
-import ${bigCamelize(name)} from '..'
+import ${bigCamelizeName} from '..'
 import { defineComponent } from 'vue'
 
 export default defineComponent({
-  name: '${bigCamelize(name)}Example',
+  name: '${bigCamelizeName}Example',
   components: {
-    [${bigCamelize(name)}.name]: ${bigCamelize(name)}
+    [${bigCamelizeName}.name]: ${bigCamelizeName}
   }
 })
 </script>
@@ -87,16 +88,21 @@ export default defineComponent({
     return
   }
 
-  await Promise.all([mkdirs(componentDir), mkdirs(testsDir), mkdirs(exampleDir), mkdirs(docsDir)])
-
   await Promise.all([
-    writeFile(resolve(componentDir, `${bigCamelize(name)}.vue`), vueTemplate),
-    writeFile(resolve(componentDir, 'index.ts'), indexTemplate),
-    writeFile(resolve(testsDir, 'index.spec.js'), testsTemplate),
-    writeFile(resolve(exampleDir, 'index.vue'), exampleTemplate),
-    writeFile(resolve(docsDir, 'zh-CN.md'), ''),
-    writeFile(resolve(docsDir, 'en-US.md'), ''),
+    outputFile(resolve(componentDir, `${bigCamelizeName}.vue`), vueTemplate),
+    outputFile(resolve(componentDir, 'index.ts'), indexTemplate),
+    outputFile(resolve(testsDir, 'index.spec.js'), testsTemplate),
+    outputFile(resolve(exampleDir, 'index.vue'), exampleTemplate),
+    outputFile(resolve(docsDir, 'zh-CN.md'), ''),
+    outputFile(resolve(docsDir, 'en-US.md'), ''),
   ])
 
-  logger.success('create success!')
+  logger.success(`Create ${name} success!`)
+  logger.success(`----------------------------`)
+  logger.success(`${name}/`)
+  logger.success(`|- __tests__/ # Unit test folder`)
+  logger.success(`|- docs/ # Internationalized document folder`)
+  logger.success(`|- example/ # Mobile phone example code`)
+  logger.success(`|- ${bigCamelizeName}.vue # Sfc component, You can also use jsx or tsx`)
+  logger.success(`|- index.ts # Component entry, the folder where the file exists will be exposed to the user`)
 }

packages/varlet-cli/src/commands/dev.ts

@@ -1,5 +1,6 @@
 import webpack from 'webpack'
 import WebpackDevServer from 'webpack-dev-server'
+import address from 'address'
 import logger from '../shared/logger'
 import { getPort } from 'portfinder'
 import { ensureDirSync } from 'fs-extra'
@@ -19,7 +20,9 @@ export function runDevServer(port: number, config: any) {
       return
     }
 
-    logger.success(`Server running at http://${host}:${port}`)
+    logger.success(`  Server running at:`)
+    logger.success(`  Local: http://${host}:${port}`)
+    logger.success(`  Network: http://${address.ip()}:${port}\n`)
   })
 }
 

yarn.lock

@@ -3579,6 +3579,11 @@ acorn@^8.4.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.4.1.tgz#56c36251fc7cabc7096adc18f05afe814321a28c"
   integrity sha512-asabaBSkEKosYKMITunzX177CXxQ4Q8BSSzMTKD+FefUhipQC70gfW5SiUDhYQ3vk8G+81HqQk7Fv9OXwwn9KA==
 
+address@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
+  integrity sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==
+
 agent-base@4, agent-base@^4.3.0:
   version "4.3.0"
   resolved "https://registry.npmjs.org/agent-base/-/agent-base-4.3.0.tgz#8165f01c436009bccad0b1d122f05ed770efc6ee"