Repository: F-loat/vue-cli-plugin-qiankun Branch: master Commit: cb0626ae1d6e Files: 54 Total size: 28.5 KB Directory structure: gitextract_qsbuelvj/ ├── .editorconfig ├── .github/ │ └── workflows/ │ └── ci.yml ├── .gitignore ├── LICENSE ├── README.md ├── examples/ │ ├── README.md │ ├── bar-app/ │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .eslintrc.js │ │ ├── .gitignore │ │ ├── README.md │ │ ├── babel.config.js │ │ ├── package.json │ │ ├── public/ │ │ │ └── index.html │ │ ├── src/ │ │ │ ├── App.vue │ │ │ ├── components/ │ │ │ │ └── HelloWorld.vue │ │ │ └── main.js │ │ └── vue.config.js │ ├── foo-app/ │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .eslintrc.js │ │ ├── .gitignore │ │ ├── README.md │ │ ├── babel.config.js │ │ ├── package.json │ │ ├── public/ │ │ │ └── index.html │ │ ├── src/ │ │ │ ├── App.vue │ │ │ ├── components/ │ │ │ │ └── HelloWorld.vue │ │ │ ├── main.js │ │ │ ├── router/ │ │ │ │ └── index.js │ │ │ └── views/ │ │ │ ├── About.vue │ │ │ └── Home.vue │ │ └── vue.config.js │ ├── master/ │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .eslintrc.js │ │ ├── .gitignore │ │ ├── README.md │ │ ├── babel.config.js │ │ ├── package.json │ │ ├── public/ │ │ │ └── index.html │ │ ├── src/ │ │ │ ├── App.vue │ │ │ └── main.js │ │ └── vue.config.js │ └── package.json ├── generator/ │ ├── index.js │ ├── master.js │ ├── slave.js │ └── template/ │ ├── master/ │ │ └── src/ │ │ └── App.vue │ └── slave/ │ └── main.js ├── index.js ├── package.json ├── prompts.js └── public-path.js ================================================ FILE CONTENTS ================================================ ================================================ FILE: .editorconfig ================================================ root = true [*] charset = utf-8 indent_style = space indent_size = 2 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true ================================================ FILE: .github/workflows/ci.yml ================================================ name: GitHub Actions Build and Deploy Demo on: push: branches: - master jobs: build-and-deploy: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v1 - name: Install and Build run: | cd examples yarn yarn install:all yarn build:all - name: Deploy uses: JamesIves/github-pages-deploy-action@releases/v3 with: ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} BRANCH: gh-pages FOLDER: examples/master/dist CLEAN: true ================================================ FILE: .gitignore ================================================ # Logs logs *.log npm-debug.log* yarn-debug.log* yarn-error.log* lerna-debug.log* # Diagnostic reports (https://nodejs.org/api/report.html) report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json # 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 *.lcov # nyc test coverage .nyc_output # Grunt intermediate storage (https://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/ # TypeScript cache *.tsbuildinfo # Optional npm cache directory .npm # Optional eslint cache .eslintcache # Microbundle cache .rpt2_cache/ .rts2_cache_cjs/ .rts2_cache_es/ .rts2_cache_umd/ # Optional REPL history .node_repl_history # Output of 'npm pack' *.tgz # Yarn Integrity file .yarn-integrity # dotenv environment variables file .env .env.test # parcel-bundler cache (https://parceljs.org/) .cache # Next.js build output .next # Nuxt.js build / generate output .nuxt dist # Gatsby files .cache/ # Comment in the public line in if your project uses Gatsby and *not* Next.js # https://nextjs.org/blog/next-9-1#public-directory-support # public # vuepress build output .vuepress/dist # Serverless directories .serverless/ # FuseBox cache .fusebox/ # DynamoDB Local files .dynamodb/ # TernJS port file .tern-port # Lock file yarn.lock package-lock.json ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2020 徒言 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ ## vue-cli-plugin-qiankun > qiankun plugin for vue-cli [![npm version](https://img.shields.io/npm/v/vue-cli-plugin-qiankun.svg?style=flat-square)](https://www.npmjs.com/package/vue-cli-plugin-qiankun) [![npm downloads](https://img.shields.io/npm/dt/vue-cli-plugin-qiankun.svg?style=flat-square)](https://www.npmjs.com/package/vue-cli-plugin-qiankun) ### 使用步骤 (Use setup) 1. 创建主应用 (Create master project) ``` sh $ vue create master $ cd master $ vue add vue-cli-plugin-qiankun --type master ``` 2. 创建子应用 (Create slave project) ``` sh $ vue create foo-app $ cd foo-app $ vue add vue-cli-plugin-qiankun --type slave --port 8081 ``` 3. 配置主应用 (Config master project) > master/src/App.vue ``` vue ``` 4. 运行各项目 (Run each project) ``` sh $ cd master $ yarn serve ``` ``` sh $ cd foo-app $ yarn serve ``` ### 示例 (Examples) > [DEMO](https://f-loat.github.io/vue-cli-plugin-qiankun) ``` sh $ cd examples $ yarn $ yarn install:all $ yarn serve:all ``` ### 功能 (Features) - 修改项目文件引入 qiankun 框架 - 注入 qiankun 框架要求的构建配置 - 自动配置 `publicPath` 处理资源路径 ### 致谢 (Acknowledgements) - [vue-cli](https://github.com/vuejs/vue-cli) Standard Tooling for Vue.js Development. - [qiankun](https://github.com/umijs/qiankun) Blazing fast, simple and completed solution for micro frontends. - [single-spa](https://github.com/CanopyTax/single-spa) What an awesome meta-framework for micro-frontends! ================================================ FILE: examples/README.md ================================================ ## Examples ``` sh $ yarn $ yarn install:all $ yarn serve:all ``` ================================================ FILE: examples/bar-app/.browserslistrc ================================================ > 1% last 2 versions ================================================ FILE: examples/bar-app/.editorconfig ================================================ [*.{js,jsx,ts,tsx,vue}] indent_style = space indent_size = 2 trim_trailing_whitespace = true insert_final_newline = true ================================================ FILE: examples/bar-app/.eslintrc.js ================================================ module.exports = { root: true, env: { node: true }, 'extends': [ 'plugin:vue/essential', '@vue/standard' ], rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' }, parserOptions: { parser: 'babel-eslint' } } ================================================ FILE: examples/bar-app/.gitignore ================================================ .DS_Store node_modules /dist # local env files .env.local .env.*.local # Log files npm-debug.log* yarn-debug.log* yarn-error.log* # Editor directories and files .idea .vscode *.suo *.ntvs* *.njsproj *.sln *.sw? ================================================ FILE: examples/bar-app/README.md ================================================ # bar-app ## Project setup ``` yarn install ``` ### Compiles and hot-reloads for development ``` yarn run serve ``` ### Compiles and minifies for production ``` yarn run build ``` ### Run your tests ``` yarn run test ``` ### Lints and fixes files ``` yarn run lint ``` ### Customize configuration See [Configuration Reference](https://cli.vuejs.org/config/). ================================================ FILE: examples/bar-app/babel.config.js ================================================ module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ] } ================================================ FILE: examples/bar-app/package.json ================================================ { "name": "bar-app", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve --port 8082", "build": "vue-cli-service build", "postbuild": "cp-cli dist ../master/dist/bar-app", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.4.4", "vue": "^2.6.10" }, "devDependencies": { "@vue/cli-plugin-babel": "^4.1.0", "@vue/cli-plugin-eslint": "^4.1.0", "@vue/cli-service": "^4.1.0", "@vue/eslint-config-standard": "^4.0.0", "babel-eslint": "^10.0.3", "cp-cli": "^2.0.0", "eslint": "^5.16.0", "eslint-plugin-vue": "^5.0.0", "vue-cli-plugin-qiankun": "../../", "vue-template-compiler": "^2.6.10" } } ================================================ FILE: examples/bar-app/public/index.html ================================================ bar-app
================================================ FILE: examples/bar-app/src/App.vue ================================================ ================================================ FILE: examples/bar-app/src/components/HelloWorld.vue ================================================ ================================================ FILE: examples/bar-app/src/main.js ================================================ import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false let instance = null function render () { instance = new Vue({ render: h => h(App) }).$mount('#app') } if (!window.__POWERED_BY_QIANKUN__) { render() } export async function bootstrap () { // eslint-disable-next-line no-console console.log('vue app bootstraped') } export async function mount (props) { // eslint-disable-next-line no-console console.log('props from main framework', props) render() } export async function unmount () { instance.$destroy() instance = null } ================================================ FILE: examples/bar-app/vue.config.js ================================================ module.exports = { productionSourceMap: false, indexPath: process.env.NODE_ENV === 'production' ? 'source.html' : 'index.html', publicPath: process.env.VUE_APP_BASE_PATH } ================================================ FILE: examples/foo-app/.browserslistrc ================================================ > 1% last 2 versions ================================================ FILE: examples/foo-app/.editorconfig ================================================ [*.{js,jsx,ts,tsx,vue}] indent_style = space indent_size = 2 trim_trailing_whitespace = true insert_final_newline = true ================================================ FILE: examples/foo-app/.eslintrc.js ================================================ module.exports = { root: true, env: { node: true }, 'extends': [ 'plugin:vue/essential', '@vue/standard' ], rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' }, parserOptions: { parser: 'babel-eslint' } } ================================================ FILE: examples/foo-app/.gitignore ================================================ .DS_Store node_modules /dist # local env files .env.local .env.*.local # Log files npm-debug.log* yarn-debug.log* yarn-error.log* # Editor directories and files .idea .vscode *.suo *.ntvs* *.njsproj *.sln *.sw? ================================================ FILE: examples/foo-app/README.md ================================================ # foo-app ## Project setup ``` yarn install ``` ### Compiles and hot-reloads for development ``` yarn run serve ``` ### Compiles and minifies for production ``` yarn run build ``` ### Run your tests ``` yarn run test ``` ### Lints and fixes files ``` yarn run lint ``` ### Customize configuration See [Configuration Reference](https://cli.vuejs.org/config/). ================================================ FILE: examples/foo-app/babel.config.js ================================================ module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ] } ================================================ FILE: examples/foo-app/package.json ================================================ { "name": "foo-app", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve --port 8081", "build": "vue-cli-service build", "postbuild": "cp-cli dist ../master/dist/foo-app", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.4.4", "vue": "^2.6.10", "vue-router": "^3.1.3" }, "devDependencies": { "@vue/cli-plugin-babel": "^4.1.0", "@vue/cli-plugin-eslint": "^4.1.0", "@vue/cli-service": "^4.1.0", "@vue/eslint-config-standard": "^4.0.0", "babel-eslint": "^10.0.3", "cp-cli": "^2.0.0", "eslint": "^5.16.0", "eslint-plugin-vue": "^5.0.0", "vue-cli-plugin-qiankun": "../../", "vue-template-compiler": "^2.6.10" } } ================================================ FILE: examples/foo-app/public/index.html ================================================ foo-app
================================================ FILE: examples/foo-app/src/App.vue ================================================ ================================================ FILE: examples/foo-app/src/components/HelloWorld.vue ================================================ ================================================ FILE: examples/foo-app/src/main.js ================================================ import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false let instance = null function render () { instance = new Vue({ router, render: h => h(App) }).$mount('#app') } if (!window.__POWERED_BY_QIANKUN__) { render() } export async function bootstrap () { // eslint-disable-next-line no-console console.log('vue app bootstraped') } export async function mount (props) { // eslint-disable-next-line no-console console.log('props from main framework', props) render() } export async function unmount () { instance.$destroy() instance = null } ================================================ FILE: examples/foo-app/src/router/index.js ================================================ import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') } ] const router = new VueRouter({ mode: 'history', base: window.__POWERED_BY_QIANKUN__ ? process.env.VUE_APP_BASE_PATH || '/foo-app/' : '/', routes }) export default router ================================================ FILE: examples/foo-app/src/views/About.vue ================================================ ================================================ FILE: examples/foo-app/src/views/Home.vue ================================================ ================================================ FILE: examples/foo-app/vue.config.js ================================================ module.exports = { productionSourceMap: false, indexPath: process.env.NODE_ENV === 'production' ? 'source.html' : 'index.html', publicPath: process.env.VUE_APP_BASE_PATH } ================================================ FILE: examples/master/.browserslistrc ================================================ > 1% last 2 versions ================================================ FILE: examples/master/.editorconfig ================================================ [*.{js,jsx,ts,tsx,vue}] indent_style = space indent_size = 2 trim_trailing_whitespace = true insert_final_newline = true ================================================ FILE: examples/master/.eslintrc.js ================================================ module.exports = { root: true, env: { node: true }, 'extends': [ 'plugin:vue/essential', '@vue/standard' ], rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' }, parserOptions: { parser: 'babel-eslint' } } ================================================ FILE: examples/master/.gitignore ================================================ .DS_Store node_modules /dist # local env files .env.local .env.*.local # Log files npm-debug.log* yarn-debug.log* yarn-error.log* # Editor directories and files .idea .vscode *.suo *.ntvs* *.njsproj *.sln *.sw? ================================================ FILE: examples/master/README.md ================================================ # master ## Project setup ``` yarn install ``` ### Compiles and hot-reloads for development ``` yarn run serve ``` ### Compiles and minifies for production ``` yarn run build ``` ### Run your tests ``` yarn run test ``` ### Lints and fixes files ``` yarn run lint ``` ### Customize configuration See [Configuration Reference](https://cli.vuejs.org/config/). ================================================ FILE: examples/master/babel.config.js ================================================ module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ] } ================================================ FILE: examples/master/package.json ================================================ { "name": "master", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "postbuild": "cp-cli dist/index.html dist/404.html", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.4.4", "qiankun": "^2.0.0", "vue": "^2.6.10" }, "devDependencies": { "@vue/cli-plugin-babel": "^4.1.0", "@vue/cli-plugin-eslint": "^4.1.0", "@vue/cli-service": "^4.1.0", "@vue/eslint-config-standard": "^4.0.0", "babel-eslint": "^10.0.3", "cp-cli": "^2.0.0", "eslint": "^5.16.0", "eslint-plugin-vue": "^5.0.0", "vue-cli-plugin-qiankun": "../../", "vue-template-compiler": "^2.6.10" } } ================================================ FILE: examples/master/public/index.html ================================================ master
================================================ FILE: examples/master/src/App.vue ================================================ ================================================ FILE: examples/master/src/main.js ================================================ import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App) }).$mount('#app') ================================================ FILE: examples/master/vue.config.js ================================================ module.exports = { productionSourceMap: false, publicPath: process.env.NODE_ENV === 'production' ? '/vue-cli-plugin-qiankun/' : '/' } ================================================ FILE: examples/package.json ================================================ { "name": "examples", "license": "MIT", "scripts": { "install:all": "yarn install:master && yarn install:foo && yarn install:bar", "install:master": "cd master && yarn", "install:foo": "cd foo-app && yarn", "install:bar": "cd bar-app && yarn", "serve:all": "concurrently \"yarn serve:master\" \"yarn serve:foo\" \"yarn serve:bar\"", "serve:master": "cd master && yarn serve", "serve:foo": "cd foo-app && yarn serve", "serve:bar": "cd bar-app && yarn serve", "build:all": "concurrently \"yarn build:master\" \"yarn build:foo\" \"yarn build:bar\"", "build:master": "cd master && yarn build", "build:foo": "cd foo-app && yarn build", "build:bar": "cd bar-app && yarn build" }, "devDependencies": { "concurrently": "^5.0.2" } } ================================================ FILE: generator/index.js ================================================ module.exports = (api, { type }) => { require(`./${type}`)(api) if (api.hasPlugin('eslint')) { api.onCreateComplete(() => { require('@vue/cli-plugin-eslint/lint')({}, api) }) } } ================================================ FILE: generator/master.js ================================================ module.exports = (api) => { api.extendPackage({ dependencies: { "qiankun": "^2.0.0" } }) api.render('./template/master') } ================================================ FILE: generator/slave.js ================================================ const slaveMain = require('./template/slave/main') module.exports = (api) => { const { port } = api.options const { projectName } = api.rootOptions api.extendPackage({ scripts: { serve: `vue-cli-service serve --port ${port}` } }) api.postProcessFiles((files) => { const routerConfigPath = 'src/router/index.js' if (files[routerConfigPath]) { files[routerConfigPath] = files[routerConfigPath].replace( /base: process.env.BASE_URL,/, `base: window.__POWERED_BY_QIANKUN__ ? '/${projectName}' : '/',` ) } if (!files[api.entryFile].match(/\nnew Vue\(/)) { files['src/slave-main.js'] = slaveMain.standard.replace( /(new Vue\([\s\S]*)/, slaveMain.replacement ) console.info('\n暂无法自动转换该项目的 main.js 文件，请参考 src/slave-main.js 手动修改\n') } else { files[api.entryFile] = files[api.entryFile].replace( /(new Vue\([\s\S]*)/, slaveMain.replacement ) } }) } ================================================ FILE: generator/template/master/src/App.vue ================================================ ================================================ FILE: generator/template/slave/main.js ================================================ exports.standard = `import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App) }).$mount('#app') ` exports.replacement = `let instance = null function render () { instance = $1 } if (!window.__POWERED_BY_QIANKUN__) { render() } export async function bootstrap () { // eslint-disable-next-line no-console console.log('vue app bootstraped') } export async function mount (props) { // eslint-disable-next-line no-console console.log('props from main framework', props) render() } export async function unmount () { instance.$destroy() instance = null } ` ================================================ FILE: index.js ================================================ const path = require('path') module.exports = (api) => { const { name, dependencies = {} } = api.service.pkg const isMaster = !!dependencies.qiankun if (isMaster) return api.chainWebpack((config) => { config.devServer .headers({ 'Access-Control-Allow-Origin': '*' }) config.merge({ entry: { main: [ path.resolve(__dirname, './public-path.js'), path.resolve(api.service.context, 'src/main.js') ] } }) config.output .library(`${name}-[name]`) .libraryTarget('umd') .jsonpFunction(`webpackJsonp_${name}`) }) } ================================================ FILE: package.json ================================================ { "name": "vue-cli-plugin-qiankun", "version": "1.0.1", "description": "qiankun plugin for vue-cli", "main": "index.js", "files": [ "generator", "index.js", "public-path.js", "prompts.js" ], "repository": "https://github.com/F-loat/vue-cli-plugin-qiankun", "keywords": [ "vue-cli", "plugin", "qiankun", "micro-frontend" ], "author": "F-loat ", "license": "MIT", "private": false } ================================================ FILE: prompts.js ================================================ module.exports = [ { name: 'type', type: 'list', message: 'Pick a project type:', choices: [ { name: 'master', value: 'master' }, { name: 'slave', value: 'slave' } ] }, { name: 'port', type: 'input', default: 8080, message: 'Input a slave project port:', when: answers => answers.type === 'slave' } ] ================================================ FILE: public-path.js ================================================ if (window.__POWERED_BY_QIANKUN__) { // eslint-disable-next-line __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ }