Feature/dev server mp

CHANGELOG.md

@@ -58,6 +58,15 @@
 
 
 
+
+
+
+
+
+
+
+
+
 
 
 

lerna.json

@@ -18,5 +18,5 @@
       "PR: Underlying Tools": ":hammer: Underlying Tools"
     }
   },
-  "version": "2.1.32"
+  "version": "2.1.33-2"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "root",
-  "version": "2.1.32",
+  "version": "2.1.33-2",
   "private": true,
   "workspaces": [
     "packages/*"

packages/cli-shared-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/cli-shared-utils",
-  "version": "2.1.32",
+  "version": "2.1.33-2",
   "description": "share utils for mpx-cli",
   "main": "lib/index.js",
   "dependencies": {

packages/mpx-cli-service/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@mpxjs/mpx-cli-service",
-  "version": "2.1.32",
+  "version": "2.1.33-2",
   "description": "local service for mpx-cli project",
   "main": "lib/Service.js",
   "bin": {
     "mpx-cli-service": "bin/mpx-cli-service.js"
   },
   "dependencies": {
-    "@mpxjs/cli-shared-utils": "^2.1.32",
+    "@mpxjs/cli-shared-utils": "^2.1.33-2",
     "@vue/cli-service": "^5.0.0",
     "@vue/cli-shared-utils": "^5.0.4",
     "minimist": "^1.2.5"

packages/vue-cli-plugin-mpx-cloud-func/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/vue-cli-plugin-mpx-cloud-func",
-  "version": "2.1.32",
+  "version": "2.1.33-2",
   "description": "mp cloud func plugin for mpx",
   "main": "index.js",
   "scripts": {

packages/vue-cli-plugin-mpx-e2e-test/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/vue-cli-plugin-mpx-e2e-test",
-  "version": "2.1.32",
+  "version": "2.1.33-2",
   "description": "e2e plugin for mpx",
   "main": "index.js",
   "scripts": {

packages/vue-cli-plugin-mpx-eslint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/vue-cli-plugin-mpx-eslint",
-  "version": "2.1.32",
+  "version": "2.1.33-2",
   "description": "eslint plugin for mpx-cli",
   "main": "index.js",
   "scripts": {

packages/vue-cli-plugin-mpx-plugin-mode/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/vue-cli-plugin-mpx-plugin-mode",
-  "version": "2.1.32",
+  "version": "2.1.33-2",
   "description": "",
   "main": "index.js",
   "scripts": {

packages/vue-cli-plugin-mpx-ssr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/vue-cli-plugin-mpx-ssr",
-  "version": "2.1.32",
+  "version": "2.1.33-2",
   "description": " web ssr plugin for mpx-cli",
   "main": "index.js",
   "scripts": {
@@ -9,8 +9,8 @@
   "dependencies": {
     "memory-fs": "^0.5.0",
     "fs-extra": "^9.1.0",
-    "@mpxjs/vue-cli-plugin-mpx": "^2.1.32",
-    "@mpxjs/cli-shared-utils": "^2.1.32"
+    "@mpxjs/vue-cli-plugin-mpx": "^2.1.33-2",
+    "@mpxjs/cli-shared-utils": "^2.1.33-2"
   },
   "devDependencies": {
     "axios": "^1.6.0",

packages/vue-cli-plugin-mpx-theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/vue-cli-plugin-mpx-theme",
-  "version": "2.1.32",
+  "version": "2.1.33-2",
   "description": "mpx theme plugin for mpx-cli",
   "main": "index.js",
   "scripts": {

packages/vue-cli-plugin-mpx-typescript/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/vue-cli-plugin-mpx-typescript",
-  "version": "2.1.32",
+  "version": "2.1.33-2",
   "description": "typescript plugin for mpx-cli",
   "main": "index.js",
   "scripts": {

packages/vue-cli-plugin-mpx-unit-test/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/vue-cli-plugin-mpx-unit-test",
-  "version": "2.1.32",
+  "version": "2.1.33-2",
   "description": "unit-test for mpx-cli",
   "main": "index.js",
   "scripts": {

packages/vue-cli-plugin-mpx-utility-first-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/vue-cli-plugin-mpx-utility-first-css",
-  "version": "2.1.32",
+  "version": "2.1.33-2",
   "description": "utility-first css plugin for mpx-cli",
   "main": "index.js",
   "scripts": {

packages/vue-cli-plugin-mpx/commands/serve/mp.js

@@ -3,15 +3,42 @@ const { getCurrentTarget } = require('@mpxjs/cli-shared-utils')
 const { symlinkTargetConfig } = require('../../utils/symlink')
 const { handleWebpackDone } = require('../../utils/webpack')
 const { resolveServeWebpackConfigByTarget } = require('../../config/index')
+const { createDevServer } = require('./utils')
 
 /** @type {import('@vue/cli-service').ServicePlugin} */
 module.exports.serveMp = async function serveMp (api, options, args) {
   const target = getCurrentTarget()
   // 小程序构建配置
-  const webpackConfigs = await resolveServeWebpackConfigByTarget(api, options, target, args)
+  const webpackConfigs = await resolveServeWebpackConfigByTarget(
+    api,
+    options,
+    target,
+    args
+  )
+
+  // create compiler
+  const compiler = webpack(webpackConfigs)
+
+  // resolve devServer options
+  const projectDevServerOptions = webpackConfigs[0].devServer || {}
+
+  // create dev server instance
+  const { server } = await createDevServer(
+    api,
+    options,
+    args,
+    projectDevServerOptions,
+    compiler
+  )
+
   return new Promise((resolve, reject) => {
-    webpack(webpackConfigs).watch({}, (err, stats) => {
-      handleWebpackDone(err, stats, true)
+    // // handle compiler error
+    // compiler.hooks.failed.tap('mpx-cli-service serve', (msg) => {
+    //   reject(msg)
+    // })
+
+    compiler.hooks.done.tap('vue-cli-service serve', (stats) => {
+      handleWebpackDone(null, stats, true)
         .then((...res) => {
           if (!options.disabledDefaultLinkFile) {
             symlinkTargetConfig(api, target, webpackConfigs[0])
@@ -20,5 +47,7 @@ module.exports.serveMp = async function serveMp (api, options, args) {
         })
         .catch(reject)
     })
+
+    server.start().catch((err) => reject(err))
   })
 }

packages/vue-cli-plugin-mpx/commands/serve/utils.js

@@ -0,0 +1,186 @@
+const WebpackDevServer = require('webpack-dev-server')
+const launchEditorMiddleware = require('launch-editor-middleware')
+
+const defaults = {
+  host: '0.0.0.0',
+  port: 8080,
+  https: false
+}
+
+module.exports.createDevServer = async function (api, options, args, projectDevServerOptions, compiler) {
+  const portfinder = require('portfinder')
+  const prepareURLs = require('@vue/cli-service/lib/util/prepareURLs')
+  const prepareProxy = require('@vue/cli-service/lib/util/prepareProxy')
+  const isAbsoluteUrl = require('@vue/cli-service/lib/util/isAbsoluteUrl')
+
+  const isInContainer = checkInContainer()
+  const isProduction = process.env.NODE_ENV === 'production'
+
+  // resolve server options
+  const protocol = 'http'
+  const host = process.env.HOST || projectDevServerOptions.host || defaults.host
+  portfinder.basePort =
+    process.env.PORT || projectDevServerOptions.port || defaults.port
+  const port = await portfinder.getPortPromise()
+  const rawPublicUrl = args.public || projectDevServerOptions.public
+  const publicUrl = rawPublicUrl
+    ? /^[a-zA-Z]+:\/\//.test(rawPublicUrl)
+      ? rawPublicUrl
+      : `${protocol}://${rawPublicUrl}`
+    : null
+  const publicHost = publicUrl
+    ? /^[a-zA-Z]+:\/\/([^/?#]+)/.exec(publicUrl)[1]
+    : undefined
+
+  const urls = prepareURLs(
+    protocol,
+    host,
+    port,
+    isAbsoluteUrl(options.publicPath) ? '/' : options.publicPath
+  )
+  const localUrlForBrowser = publicUrl || urls.localUrlForBrowser
+
+  const proxySettings = prepareProxy(
+    projectDevServerOptions.proxy,
+    api.resolve('public')
+  )
+
+  // inject dev & hot-reload middleware entries
+  let webSocketURL
+  if (!isProduction) {
+    if (publicHost) {
+      // explicitly configured via devServer.public
+      webSocketURL = {
+        protocol: protocol === 'https' ? 'wss' : 'ws',
+        hostname: publicHost,
+        port
+      }
+    } else if (isInContainer) {
+      // can't infer public network url if inside a container
+      // infer it from the browser instead
+      webSocketURL = 'auto://0.0.0.0:0/ws'
+    } else {
+      // otherwise infer the url from the config
+      webSocketURL = {
+        protocol: protocol === 'https' ? 'wss' : 'ws',
+        hostname: urls.lanUrlForConfig || 'localhost',
+        port
+      }
+    }
+  }
+
+  // create server
+  const server = new WebpackDevServer(
+    Object.assign(
+      {
+        historyApiFallback: {
+          disableDotRule: true,
+          htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
+          rewrites: genHistoryApiFallbackRewrites(
+            options.publicPath,
+            options.pages
+          )
+        },
+        hot: !isProduction
+      },
+      projectDevServerOptions,
+      {
+        host,
+        port,
+        proxy: proxySettings,
+
+        static: {
+          directory: api.resolve('public'),
+          publicPath: options.publicPath,
+          watch: !isProduction,
+
+          ...projectDevServerOptions.static
+        },
+
+        client: {
+          webSocketURL,
+
+          logging: 'none',
+          overlay: isProduction // TODO disable this
+            ? false
+            : { warnings: false, errors: true },
+          progress: !process.env.VUE_CLI_TEST,
+
+          ...projectDevServerOptions.client
+        },
+        setupExitSignals: true,
+
+        setupMiddlewares (middlewares, devServer) {
+          // launch editor support.
+          // this works with vue-devtools & @vue/cli-overlay
+          devServer.app.use(
+            '/__open-in-editor',
+            launchEditorMiddleware(() =>
+              console.log(
+                'To specify an editor, specify the EDITOR env variable or ' +
+                  'add "editor" field to your Vue project config.\n'
+              )
+            )
+          )
+
+          // allow other plugins to register middlewares, e.g. PWA
+          // todo: migrate to the new API interface
+          api.service.devServerConfigFns.forEach((fn) =>
+            fn(devServer.app, devServer)
+          )
+
+          if (projectDevServerOptions.setupMiddlewares) {
+            return projectDevServerOptions.setupMiddlewares(
+              middlewares,
+              devServer
+            )
+          }
+
+          return middlewares
+        },
+        headers: {
+          'Access-Control-Allow-Origin': '*'
+        }
+      }
+    ),
+    compiler
+  )
+
+  return {
+    server,
+    urls,
+    publicUrl,
+    publicHost,
+    localUrlForBrowser,
+    isInContainer,
+    protocol
+  }
+}
+
+function genHistoryApiFallbackRewrites (baseUrl, pages = {}) {
+  const path = require('path')
+  const multiPageRewrites = Object.keys(pages)
+    // sort by length in reversed order to avoid overrides
+    // eg. 'page11' should appear in front of 'page1'
+    .sort((a, b) => b.length - a.length)
+    .map((name) => ({
+      from: new RegExp(`^/${name}`),
+      to: path.posix.join(baseUrl, pages[name].filename || `${name}.html`)
+    }))
+  return [
+    ...multiPageRewrites,
+    { from: /./, to: path.posix.join(baseUrl, 'index.html') }
+  ]
+}
+
+// https://stackoverflow.com/a/20012536
+function checkInContainer () {
+  if ('CODESANDBOX_SSE' in process.env) {
+    return true
+  }
+  const fs = require('fs')
+  if (fs.existsSync('/proc/1/cgroup')) {
+    const content = fs.readFileSync('/proc/1/cgroup', 'utf-8')
+    return /:\/(lxc|docker|kubepods(\.slice)?)\//.test(content)
+  }
+}