feat: support webpack.output config (#18)

README-zh.md

@@ -49,12 +49,14 @@ yarn add @femessage/nuxt-micro-frontend -D
 
 **unique**: 由于 qiankun 需要一个唯一的包名区分多个子应用，如果懒得修改可以将这个属性设置为 `true`，这样会生成一个唯一的包名
 
+**output**: 由于接入不同的生态体系，需要不同的打包格式，这里可以根据 [webpack output](https://webpack.js.org/configuration/output/) 提供的选项进行注入
+
 ## 支持的微前端框架
 - [x] [qiankun](https://github.com/umijs/qiankun)
-- [ ] [single-SPA](https://github.com/single-spa/single-spa) 理论上可行，需要测试验证
+- [x] [single-SPA](https://github.com/single-spa/single-spa) demo 在 examples/single-spa-demo 下
 
 ## 微前端生命周期函数例子
-[Qiankun](https://github.com/FEMessage/micro-nuxt/blob/master/example/mfe.js)
+[Qiankun](https://github.com/FEMessage/micro-nuxt/blob/master/examples/normal/mfe.js)
 
 - 增加了 `mounted` 和 `beforeUnmount` 两个钩子方便操作 vue 实例
 

README.md

@@ -47,12 +47,14 @@ yarn add @femessage/nuxt-micro-frontend -D
 
 **unique**: If use qiankun, sub application's package name should unique. Set unique to true can create a unique umd target.
 
+**output**: If use the other micro library, probably need to config the [webpack output](https://webpack.js.org/configuration/output/) libraryTarget.
+
 ## Support Micro Front-End Framework
 - [x] [qiankun](https://github.com/umijs/qiankun)
-- [ ] [single-SPA](https://github.com/single-spa/single-spa) waiting for test and verify
+- [x] [single-SPA](https://github.com/single-spa/single-spa) example in examples/single-spa-demo
 
 ## LifeCycle hooks file example
-[Qiankun](https://github.com/FEMessage/micro-nuxt/blob/master/example/mfe.js)
+[Qiankun](https://github.com/FEMessage/micro-nuxt/blob/master/examples/normal/mfe.js)
 
 - add `mounted` and `beforeUnmount` hook to get vue instance
 

examples/normal/nuxt.config.js

@@ -0,0 +1,18 @@
+const { resolve } = require('path')
+
+module.exports = {
+  mode: 'spa',
+  MFE: {
+    path: 'mfe.js',
+    force: true
+  },
+  // rootDir: resolve(__dirname, '../../'),
+  // buildDir: resolve(__dirname, '.nuxt'),
+  // srcDir: __dirname,
+  render: {
+    resourceHints: false
+  },
+  modules: [
+    { handler: require('../../') }
+  ]
+}

examples/normal/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "nuxt-subapp",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "cross-env nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "generate": "nuxt generate"
+  },
+  "dependencies": {
+    "nuxt-edge": "latest"
+  },
+  "devDependencies": {
+    "cross-env": "^7.0.2"
+  }
+}

examples/single-spa-demo/README.md

@@ -0,0 +1,57 @@
+# mfe single-spa demo
+
+## run
+
+```shell
+yarn && yarn install:all
+
+yarn serve:all
+```
+
+## main project
+
+it has two function `getManifest` and `runScript` to load the microfrontend lifecycle in src/utils.js
+
+## nuxt-subapp
+
+### options
+
+in nuxt.config.js MFE options like that
+
+```js
+  MFE: {
+    force: true,
+    output: {
+        library: `nuxt-subapp-app`,
+        libraryTarget: 'window',
+    }
+  }
+```
+
+use the libraryTarget window, we can access window['nuxt-subapp-app'] to get the microfrontend lifecycle
+
+
+### build manifest.json
+
+and i build manifest.json for the nuxt project, it can help main project to get the entry lifecycle
+
+```js
+const StatsPlugin = require('stats-webpack-plugin')
+
+export default {
+    build: {
+        extend(config) {
+            config.plugins.push(new StatsPlugin('manifest.json', {
+                chunkModules: false,
+                entrypoints: true,
+                source: false,
+                chunks: false,
+                modules: false,
+                assets: false,
+                children: false,
+                exclude: [/node_modules/]
+            }))
+        }
+    }
+}
+```

examples/single-spa-demo/main-project/.eslintrc

@@ -0,0 +1,4 @@
+{
+  "extends": ["important-stuff", "plugin:prettier/recommended"],
+  "parser": "babel-eslint"
+}

examples/single-spa-demo/main-project/.gitignore

@@ -0,0 +1,72 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
+dist
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.DS_Store

examples/single-spa-demo/main-project/.prettierignore

@@ -0,0 +1,8 @@
+.gitignore
+.prettierignore
+yarn.lock
+yarn-error.log
+package-lock.json
+LICENSE
+*.ejs
+dist

examples/single-spa-demo/main-project/babel.config.json

@@ -0,0 +1,23 @@
+{
+  "presets": [
+    "@babel/preset-env",
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "useESModules": true,
+        "regenerator": false
+      }
+    ]
+  ],
+  "env": {
+    "test": {
+      "presets": [
+        ["@babel/preset-env", {
+          "targets": "current node"
+        }]
+      ]
+    }
+  }
+}

examples/single-spa-demo/main-project/package.json

@@ -0,0 +1,46 @@
+{
+  "scripts": {
+    "start": "webpack-dev-server --mode=development --port 9000 --env.isLocal=true",
+    "lint": "eslint src --ext js",
+    "test": "cross-env BABEL_ENV=test jest --passWithNoTests",
+    "format": "prettier --write \"./**\"",
+    "build": "webpack --mode=production"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged && concurrently yarn:test yarn:lint"
+    }
+  },
+  "devDependencies": {
+    "@babel/core": "^7.7.4",
+    "@babel/plugin-transform-runtime": "^7.8.3",
+    "@babel/preset-env": "^7.7.4",
+    "@babel/runtime": "^7.8.7",
+    "@types/jest": "^25.2.1",
+    "@types/systemjs": "^6.1.0",
+    "babel-eslint": "^11.0.0-beta.2",
+    "concurrently": "^5.1.0",
+    "cross-env": "^7.0.2",
+    "eslint": "^6.7.2",
+    "eslint-config-important-stuff": "^1.1.0",
+    "eslint-config-prettier": "^6.7.0",
+    "eslint-plugin-prettier": "^3.1.1",
+    "html-webpack-plugin": "^4.0.4",
+    "husky": "^4.2.3",
+    "jest": "^25.2.7",
+    "jest-cli": "^25.2.7",
+    "prettier": "^2.0.4",
+    "pretty-quick": "^2.0.1",
+    "serve": "^11.2.0",
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.10",
+    "webpack-config-single-spa": "^1.4.1",
+    "webpack-dev-server": "^3.9.0",
+    "webpack-merge": "^4.2.2"
+  },
+  "dependencies": {
+    "axios": "^0.19.2",
+    "import-html-entry": "^1.7.4",
+    "single-spa": "^5.3.1"
+  }
+}

examples/single-spa-demo/main-project/src/femessage-root-config.js

@@ -0,0 +1,15 @@
+import { registerApplication, start } from "single-spa";
+import { getManifest } from './utils.js'
+
+registerApplication({
+  name: "@femessage/nuxt",
+  app: async () => {
+        await getManifest('http://localhost:7102/_nuxt/manifest.json', 'app')
+        return window["nuxt-subapp-app"];
+  },
+  activeWhen: ["/nuxt"]
+});
+
+start({
+  urlRerouteOnly: true,
+});