feat(packages/**): 架构调整,实现varlet-cli dev build命令

affects: @varlet/cli, @varlet/eslint-config, @varlet/stylelint-config, @varlet/ui 实现varlet-cli dev打包配置并启动开发服务器实现varlet-cli build打包组件库站点生产环境代码 eslint,stylelint-config规则调整创建子包varlet-ui
varletjs · Nov 3, 2020 · 1ca2cf6 · 1ca2cf6
1 parent 0b51c3d
commit 1ca2cf6
Show file tree

Hide file tree

Showing 30 changed files with 4,604 additions and 145 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,4 @@ node_modules
 *.log
 
 packages/varlet-cli/lib
+packages/varlet-ui/site
diff --git a/package.json b/package.json
@@ -34,13 +34,16 @@
   },
   "eslintConfig": {
     "root": true,
+    "ignorePatterns": [
+      "packages/varlet-cli/lib/**"
+    ],
     "extends": [
       "@varlet"
     ]
   },
   "stylelint": {
     "extends": [
-      "varlet-stylelint-config"
+      "@varlet/stylelint-config"
     ]
   },
   "publishConfig": {
@@ -51,10 +54,14 @@
     "@commitlint/config-conventional": "^11.0.0",
     "commitizen": "^4.2.2",
     "cz-lerna-changelog": "^2.0.3",
+    "eslint": "^7.12.1",
     "husky": "^4.3.0",
     "lerna": "^3.22.1",
     "lint-staged": "^10.5.0",
     "prettier": "^2.1.2",
-    "typescript": "^4.0.5"
+    "stylelint": "^13.7.2",
+    "typescript": "^4.0.5",
+    "vue": "3.0.2",
+    "vue-router": "4.0.0-rc.1"
   }
 }
diff --git a/packages/varlet-cli/package.json b/packages/varlet-cli/package.json
@@ -2,6 +2,9 @@
   "name": "@varlet/cli",
   "version": "0.1.7",
   "description": "cli of varlet",
+  "bin": {
+    "varlet-cli": "./lib/index.js"
+  },
   "keywords": [
     "cli",
     "varlet"
@@ -10,14 +13,61 @@
   "license": "MIT",
   "main": "lbd/index.js",
   "files": [
-    "lib"
+    "lib/commands",
+    "lib/config",
+    "lib/shared",
+    "lib/index.js",
+    "lib/index.d.js"
   ],
   "repository": {
     "type": "git",
     "url": "https://github.com/haoziqaq/varlet.git"
   },
   "scripts": {
-    "dev": "tsc --watch"
+    "dev": "tsc --watch",
+    "build": "tsc"
+  },
+  "gitHead": "5d0fd4bae88bc6f65335da5cfb944489cca16693",
+  "dependencies": {
+    "@babel/core": "^7.12.3",
+    "@babel/plugin-transform-runtime": "^7.12.1",
+    "@babel/preset-env": "^7.12.1",
+    "@babel/preset-typescript": "^7.12.1",
+    "@vue/compiler-sfc": "^3.0.2",
+    "autoprefixer": "8.0.0",
+    "babel-loader": "^8.1.0",
+    "cache-loader": "^4.1.0",
+    "chalk": "^4.1.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "commander": "^6.2.0",
+    "css-loader": "^5.0.0",
+    "fork-ts-checker-webpack-plugin": "^5.2.1",
+    "fs-extra": "^9.0.1",
+    "html-webpack-plugin": "^4.5.0",
+    "less": "^3.12.2",
+    "less-loader": "^7.0.2",
+    "mini-css-extract-plugin": "^1.2.1",
+    "node-sass": "^5.0.0",
+    "portfinder": "^1.0.28",
+    "postcss-loader": "^4.0.4",
+    "sass-loader": "^10.0.5",
+    "slash": "^3.0.0",
+    "style-loader": "^2.0.0",
+    "ts-loader": "^8.0.7",
+    "typescript": "^4.0.5",
+    "vue-loader": "^16.0.0-beta.9",
+    "webpack": "4",
+    "webpack-dev-server": "^3.11.0",
+    "webpack-merge": "^5.3.0",
+    "webpackbar": "^5.0.0-3"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^9.0.2",
+    "@types/mini-css-extract-plugin": "^1.2.0",
+    "@types/webpack-dev-server": "^3.11.1"
   },
-  "gitHead": "5d0fd4bae88bc6f65335da5cfb944489cca16693"
+  "peerDependencies": {
+    "vue": "3.0.2",
+    "vue-router": "4.0.0-rc.1"
+  }
 }
diff --git a/packages/varlet-cli/site/mobile/App.vue b/packages/varlet-cli/site/mobile/App.vue
@@ -0,0 +1,3 @@
+<template>
+  <router-view/>
+</template>
diff --git a/packages/varlet-cli/site/mobile/main.ts b/packages/varlet-cli/site/mobile/main.ts
@@ -0,0 +1,15 @@
+import { createApp } from 'vue'
+import { createRouter, createWebHashHistory } from 'vue-router'
+import App from './App.vue'
+import routes from './routes'
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes
+})
+
+const app = createApp(App as any)
+app
+  .use(router)
+  .mount('#app')
+
diff --git a/packages/varlet-cli/site/mobile/mobile.html b/packages/varlet-cli/site/mobile/mobile.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <meta content="<%= htmlWebpackPlugin.options.description %>" name="description" />
+    <link href="<%= htmlWebpackPlugin.options.logo %>" rel="icon" type="image/png" />
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" name="viewport" />
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/packages/varlet-cli/site/mobile/routes.ts b/packages/varlet-cli/site/mobile/routes.ts
@@ -0,0 +1,2 @@
+export default [  
+]
diff --git a/packages/varlet-cli/site/pc/App.vue b/packages/varlet-cli/site/pc/App.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="varlet-button">
+    <div class="varlet-button__text">
+      <div class="varlet-button__span--active">{{ count }}</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref, Ref, defineComponent } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const count: Ref<number> = ref(0)
+    return {
+      count
+    }
+  }
+})
+</script>
+
+<style lang="less">
+.varlet {
+  &-button {
+    &__text {
+
+    }
+    &__span {
+
+    }
+  }
+}
+</style>
diff --git a/packages/varlet-cli/site/pc/index.html b/packages/varlet-cli/site/pc/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <meta content="<%= htmlWebpackPlugin.options.description %>" name="description" />
+    <link href="<%= htmlWebpackPlugin.options.logo %>" rel="icon" type="image/png" />
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" name="viewport" />
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/packages/varlet-cli/site/pc/main.ts b/packages/varlet-cli/site/pc/main.ts
@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+const app = createApp(App as any)
+app.mount('#app')
+
diff --git a/packages/varlet-cli/src/commands/build.ts b/packages/varlet-cli/src/commands/build.ts
@@ -0,0 +1,20 @@
+import webpack from 'webpack'
+import logger from '../shared/logger'
+import { buildMobileSiteRoutes } from '../shared/fsUtils'
+import { getBuildConfig } from '../config/webpack.build.config'
+import { setProd } from '../shared/env'
+
+export async function build() {
+  try {
+    setProd()
+    await buildMobileSiteRoutes()
+    const config = getBuildConfig()
+
+    webpack(config, (err, stats) => {
+      err && logger.error(err.toString())
+      stats.hasErrors() && logger.error(stats)
+    })
+  } catch (e) {
+    logger.error(e)
+  }
+}
diff --git a/packages/varlet-cli/src/commands/dev.ts b/packages/varlet-cli/src/commands/dev.ts
@@ -0,0 +1,40 @@
+import webpack from 'webpack'
+import WebpackDevServer from 'webpack-dev-server'
+import logger from '../shared/logger'
+import { getDevConfig } from '../config/webpack.dev.config'
+import { getPort } from 'portfinder'
+import { buildMobileSiteRoutes } from '../shared/fsUtils'
+import { setDev } from '../shared/env'
+
+export function runDevServer(port: number, config: any) {
+  const { host } = config.devServer
+  const server = new WebpackDevServer(webpack(config), config.devServer)
+
+  ;(server as any).showStatus = function() {}
+
+  server.listen(port, host,(err?: Error) => {
+    if (err) {
+      logger.error(err.toString())
+      return
+    }
+
+    logger.success(`Server running at http://${host}:${port}`)
+  })
+}
+
+export async function dev() {
+  setDev()
+  await buildMobileSiteRoutes()
+
+  const config = getDevConfig()
+  const { port } = config.devServer
+  getPort({
+    port
+  }, (err: Error, port: number) => {
+    if (err) {
+      logger.error(err.toString())
+      return
+    }
+    runDevServer(port, config)
+  })
+}
diff --git a/packages/varlet-cli/src/config/postcss.config.ts b/packages/varlet-cli/src/config/postcss.config.ts
@@ -0,0 +1,18 @@
+import { pathExistsSync } from 'fs-extra'
+
+export function createPostcssOptions(path: string) {
+  const defaultConfig = {
+    postcssOptions: {
+      plugins: ['autoprefixer']
+    }
+  }
+
+  return pathExistsSync(path)
+    ? {
+      postcssOptions: {
+        config: path,
+        plugins: ['autoprefixer']
+      }
+    }
+    : defaultConfig
+}
diff --git a/packages/varlet-cli/src/config/varlet.config.ts b/packages/varlet-cli/src/config/varlet.config.ts
@@ -0,0 +1,19 @@
+import { pathExistsSync } from 'fs-extra'
+import { VARLET_CONFIG } from '../shared/constant'
+
+export const defaultConfig = {
+  pc: {
+    title: 'Varlet 组件库文档',
+    description: 'Varlet 组件库文档',
+    logo: 'https://cn.vuejs.org/images/logo.png'
+  },
+  mobile: {
+    title: 'Varlet 组件库示例',
+    description: 'Varlet 组件库示例',
+    logo: 'https://cn.vuejs.org/images/logo.png'
+  }
+}
+
+export function getVarletConfig() {
+  return pathExistsSync(VARLET_CONFIG) && require(VARLET_CONFIG) || defaultConfig
+}