@mpxjs/vue-cli-plugin-mpx-ssr 2.1.0

package/README.md

@@ -0,0 +1,3 @@
+# @mpxjs/vue-cli-plugin-mpx-plugin-ssr
+
+web ssr插件(目前仅支持 `web`)

package/commands/build/index.js

@@ -0,0 +1,57 @@
+const { normalizeCommandArgs } = require('@mpxjs/cli-shared-utils')
+const { addBaseWebpackConfig } = require('../../config/base.config')
+const { addBuildWebpackConfig } = require('../../config/build.config')
+const { resolveBuildWebpackConfigByTarget } = require('@mpxjs/vue-cli-plugin-mpx/config')
+const { getCurrentTarget } = require('@mpxjs/cli-shared-utils')
+const { handleWebpackDone } = require('@mpxjs/vue-cli-plugin-mpx/utils/webpack')
+const webpack = require('webpack')
+const fs = require('fs-extra')
+
+const defaults = {
+  clean: true
+}
+
+module.exports.registerBuildCommand = function (api, options) {
+  api.registerCommand(
+    'build:ssr',
+    {
+      description: 'mpx production',
+      usage: 'mpx-cli-service build ssr'
+    },
+    function build (args) {
+      normalizeCommandArgs(args, defaults)
+      if (args.clean) {
+        fs.removeSync(options.outputDir)
+      }
+
+      const getBaseConfig = (ssrMode) => {
+        api.chainWebpack((config) => {
+          addBaseWebpackConfig(api, options, args, config, { ssrMode })
+          addBuildWebpackConfig(api, options, args, config, { ssrMode })
+        })
+        const target = getCurrentTarget()
+        // 根据目标获取构建配置
+        const webpackConfig = resolveBuildWebpackConfigByTarget(api, options, target, args)
+        return {
+          webpackConfig,
+          target
+        }
+      }
+
+      const buildService = (ssrMode) => {
+        return new Promise((resolve, reject) => {
+          const { webpackConfig, target } = getBaseConfig(ssrMode)
+          webpack(webpackConfig, (err, stats) => {
+            handleWebpackDone(err, stats, target, api)
+              .then((...res) => {
+                resolve(...res)
+              })
+              .catch(reject)
+          })
+        })
+      }
+
+      return Promise.all([buildService('client'), buildService('server')])
+    }
+  )
+}

package/commands/serve/index.js

@@ -0,0 +1,49 @@
+const { normalizeCommandArgs } = require('@mpxjs/cli-shared-utils')
+const { serveWeb } = require('@mpxjs/vue-cli-plugin-mpx/commands/serve/web')
+const { serveServer } = require('./serveServer')
+const { addBaseWebpackConfig } = require('../../config/base.config')
+const { addServeWebpackConfig } = require('../../config/serve.config')
+
+const defaults = {
+  port: 3000
+}
+
+module.exports.registerServeCommand = function (api, options) {
+  api.registerCommand(
+    'serve:ssr',
+    {
+      description: 'mpx development',
+      usage: 'mpx-cli-service serve ssr'
+    },
+    async function build (args) {
+      normalizeCommandArgs(args, defaults)
+
+      const getBaseConfig = (ssrMode) => {
+        const isServer = ssrMode === 'server'
+        const port = options.pluginOptions?.SSR?.devClientPort || defaults.port
+        options.publicPath = isServer ? '/' : `http://localhost:${port}/`
+        api.chainWebpack((config) => {
+          addBaseWebpackConfig(api, options, args, config, { ssrMode })
+          addServeWebpackConfig(api, options, args, config, { ssrMode })
+        })
+      }
+
+      const buildService = (ssrMode) => {
+        return new Promise((resolve, reject) => {
+          getBaseConfig(ssrMode)
+          if (ssrMode === 'client') {
+            serveWeb(api, options, args).then((...res) => {
+              resolve(...res)
+            }).catch(reject)
+          } else {
+            serveServer(api, options, args).then((...res) => {
+              resolve(...res)
+            }).catch(reject)
+          }
+        })
+      }
+
+      Promise.all([buildService('client'), buildService('server')])
+    }
+  )
+}

package/commands/serve/serveServer.js

@@ -0,0 +1,56 @@
+const { resolveServeWebpackConfigByTarget } = require('@mpxjs/vue-cli-plugin-mpx/config')
+const { getCurrentTarget } = require('@mpxjs/cli-shared-utils/lib')
+const { getReporter } = require('@mpxjs/vue-cli-plugin-mpx/utils/reporter')
+const { chalk } = require('@vue/cli-shared-utils')
+const webpack = require('webpack')
+const path = require('path')
+const MemoryFS = require('memory-fs')
+const { setServerBundle } = require('@mpxjs/cli-shared-utils')
+
+/** @type {import('@vue/cli-service').ServicePlugin} */
+module.exports.serveServer = async (api, options, args) => {
+  // resolve webpack config
+  const target = getCurrentTarget()
+  const webpackConfig = resolveServeWebpackConfigByTarget(
+    api,
+    options,
+    target,
+    args
+  )
+
+  // create compiler
+  const serverCompiler = webpack(webpackConfig)
+
+  const mfs = new MemoryFS()
+  // 指定输出到的内存流中
+  serverCompiler.outputFileSystem = mfs
+
+  return new Promise((resolve, reject) => {
+    serverCompiler.watch({}, (err, stats) => {
+      if (err) {
+        console.error(err)
+        return
+      }
+      stats = stats.toJson()
+      stats.errors.forEach(error => console.error(error))
+      stats.warnings.forEach(warn => console.warn(warn))
+
+      const bundlePath = path.join(webpackConfig.output.path, 'vue-ssr-server-bundle.json')
+
+      const serverManifest = JSON.parse(mfs.readFileSync(bundlePath, 'utf-8'))
+
+      setServerBundle(serverManifest)
+
+      getReporter()._renderStates([{
+        message: 'new server bundle generated',
+        color: 'green'
+      }])
+    })
+    try {
+      require(api.resolve('server/dev.server'))
+    } catch (e) {
+      reject(e)
+    }
+    resolve()
+  })
+}

package/config/base.config.js

@@ -0,0 +1,19 @@
+const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
+const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
+
+module.exports.addBaseWebpackConfig = function (api, options = {}, args, config, compilerConfig) {
+  const isServer = compilerConfig.ssrMode === 'server'
+
+  config.target(isServer ? 'node' : 'web')
+
+  config.output
+    .libraryTarget(isServer ? 'commonjs2' : undefined)
+
+  if (isServer) {
+    config.optimization.splitChunks(false)
+  }
+
+  config
+    .plugin(`${isServer ? 'server-plugin' : 'client-plugin'}`)
+    .use(isServer ? VueSSRServerPlugin : VueSSRClientPlugin)
+}

package/config/build.config.js

@@ -0,0 +1,8 @@
+module.exports.addBuildWebpackConfig = function (api, options = {}, args, config, compilerConfig) {
+  const isServer = compilerConfig.ssrMode === 'server'
+
+  config.cache({
+    ...config.get('cache'),
+    name: isServer ? 'build-serverBundleCache' : 'build-clientBundleCache'
+  })
+}

package/config/serve.config.js

@@ -0,0 +1,10 @@
+module.exports.addServeWebpackConfig = function (api, options = {}, args, config, compilerConfig) {
+  const isServer = compilerConfig.ssrMode === 'server'
+
+  config.cache({
+    ...config.get('cache'),
+    name: isServer ? 'dev-serverBundleCache' : 'dev-clientBundleCache'
+  })
+
+  config.devServer.port(options.pluginOptions?.SSR?.devClientPort || 3000)
+}

package/generator/index.js

@@ -0,0 +1,15 @@
+module.exports = function (api, options) {
+  api.render('./template', options)
+  api.extendPackage({
+    scripts: {
+      'serve:ssr': 'mpx-cli-service serve:ssr',
+      'build:ssr': 'mpx-cli-service build:ssr'
+    },
+    devDependencies: {
+      axios: '^1.6.0',
+      express: '^4.18.2',
+      'serve-favicon': '^2.5.0',
+      'vue-server-renderer': '^2.7.14'
+    }
+  })
+}

package/generator/template/public/index.ssr.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <meta name="format-detection" content="telephone=no">
+  <meta name="x5-cache" content="disable">
+  <title></title>
+</head>
+<body>
+<!--vue-ssr-outlet-->
+</body>
+</html>

package/generator/template/server/build.server.js

@@ -0,0 +1,44 @@
+const express = require('express')
+const fs = require('fs')
+
+const app = express()
+
+// 创建渲染器 获得一个createBundleRenderer
+const { createBundleRenderer } = require('vue-server-renderer')
+const serverBundle = require('../dist/web/vue-ssr-server-bundle.json')
+const clientManifest = require('../dist/web/vue-ssr-client-manifest.json')
+const template = fs.readFileSync('../public/index.ssr.html', 'utf-8')
+
+app.use(express.static('../dist/web'))
+
+const startServer = async () => {
+  // 前端请求返回数据
+  app.get('*', async (req, res) => {
+    try {
+      const renderer = createBundleRenderer(serverBundle, {
+        runInNewContext: false,
+        template,
+        clientManifest
+      })
+      const context = { url: req.url }
+      renderer.renderToString(context, (err, html) => {
+        if (err) {
+          console.log(err)
+          res.status(500).end('Internal Server Error')
+          return
+        }
+        res.end(html)
+      })
+    } catch (error) {
+      console.log(error)
+      res.status(500).send('服务器内部错误')
+    }
+  })
+
+  /* 服务启动 */
+  const port = 8091
+  app.listen(port, () => {
+    console.log(`server started at localhost:${port}`)
+  })
+}
+startServer()

package/generator/template/server/dev.server.js

@@ -0,0 +1,63 @@
+const express = require('express')
+const { getServerBundle } = require('@mpxjs/mpx-cli-service')
+const fs = require('fs')
+const path = require('path')
+
+// 创建渲染器 获得一个createBundleRenderer
+const { createBundleRenderer } = require('vue-server-renderer')
+
+const axios = require('axios')
+
+const favicon = require('serve-favicon')
+
+const template = fs.readFileSync(path.resolve('public/index.ssr.html'), 'utf-8')
+
+const vueConfig = require('../vue.config.js')
+
+const app = express()
+
+app.use(favicon(path.resolve('public/favicon.ico')))
+
+const getRenderer = async () => {
+  const clientPort = vueConfig.pluginOptions?.SSR?.devClientPort || 3000
+  const clientManifest = await axios.get(
+    `http://localhost:${clientPort}/vue-ssr-client-manifest.json`
+  )
+  const serverManifest = getServerBundle()
+
+  return {
+    clientManifest: clientManifest.data,
+    serverManifest: serverManifest
+  }
+}
+
+const startServer = async () => {
+  app.get('*', async (req, res) => {
+    try {
+      const { clientManifest, serverManifest } = await getRenderer()
+      const renderer = createBundleRenderer(serverManifest, {
+        runInNewContext: false,
+        template,
+        clientManifest
+      })
+      const context = { url: req.url }
+      renderer.renderToString(context, (err, html) => {
+        if (err) {
+          res.status(500).end('Internal Server Error')
+          return
+        }
+        res.end(html)
+      })
+    } catch (error) {
+      console.log(error)
+      res.status(500).send('服务器内部错误')
+    }
+  })
+
+  /* 服务启动 */
+  const port = 8091
+  app.listen(port, () => {
+    console.log(`server started at localhost:${port}`)
+  })
+}
+startServer()

package/generator/template/src/app.mpx

@@ -0,0 +1,57 @@
+<script>
+import mpx, { createApp } from '@mpxjs/core'
+import apiProxy from '@mpxjs/api-proxy'
+import { createPinia } from '@mpxjs/pinia'
+
+mpx.use(apiProxy, { usePromise: true })
+
+mpx.config.webRouteConfig = {
+  mode: 'history'
+}
+
+createApp({
+  onLaunch() {
+    //
+  },
+  onAppInit() {
+    const pinia = createPinia()
+    return {
+      pinia
+    }
+  },
+  onSSRAppCreated({ pinia, router, app, context }) {
+    return new Promise((resolve, reject) => {
+      router.push(context.url)
+      router.onReady(() => {
+        context.rendered = () => {
+          context.state = pinia.state.value
+        }
+        resolve(app)
+      }, reject)
+    })
+  }
+})
+</script>
+
+<style>
+  /*此处编写全局样式*/
+</style>
+
+<script type="application/json">
+  {
+    "pages": [
+      "./pages/index"
+    ]
+  }
+</script>
+
+<!--也可以通过以下形式用js输出json，便于书写注释和使用条件编译-->
+
+<!--<script name="json">-->
+<!--  // 可以写注释，通过defs注入的常量做一些判断之类的操作-->
+<!--  module.exports = {-->
+<!--    pages: [-->
+<!--      './pages/index'-->
+<!--    ]-->
+<!--  }-->
+<!--</script>-->

package/index.js

@@ -0,0 +1,14 @@
+const { registerServeCommand } = require('./commands/serve')
+const { registerBuildCommand } = require('./commands/build')
+
+module.exports = function (api, options) {
+  registerServeCommand(api, options)
+  registerBuildCommand(api, options)
+}
+
+module.exports.defaultModes = {
+  'serve:ssr': 'development',
+  'build:ssr': 'production'
+}
+
+module.exports.after = ['@mpxjs/vue-cli-plugin-mpx']

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@mpxjs/vue-cli-plugin-mpx-ssr",
+  "version": "2.1.0",
+  "description": " web ssr plugin for mpx-cli",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "memory-fs": "^0.5.0",
+    "fs-extra": "^9.1.0",
+    "@mpxjs/vue-cli-plugin-mpx": "^2.1.0",
+    "@mpxjs/cli-shared-utils": "^2.0.7"
+  },
+  "devDependencies": {
+    "axios": "^1.6.0",
+    "express": "^4.18.2",
+    "serve-favicon": "^2.5.0",
+    "vue-server-renderer": "^2.7.14"
+  },
+  "peerDependencies": {
+    "vue-server-renderer": "^2.7.14"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  }
+}