Skip to content

Commit 00ed84f

Browse files
authored
Merge pull request #4 from aceHubert/feat-ssr
添加模块服务端渲染
2 parents c1722fa + 351b6ee commit 00ed84f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

80 files changed

+10020
-5557
lines changed

dev-modules/.browserslistrc

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
> 1%
2+
last 2 versions

dev-modules/.eslintrc.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
module.exports = {
2+
overrides: [
3+
{
4+
files: '**/*.vue',
5+
extends: [
6+
'plugin:vue/essential', // -> eslint-plugin-vue
7+
],
8+
},
9+
{
10+
files: '**/*.{ts,tsx}',
11+
extends: [
12+
'@vue/typescript/recommended', // -> @typescript-eslint/eslint-recommended & @typescript-eslint/recommended
13+
'@vue/prettier', // -> eslint-config-prettier & eslint-config-prettier/vue
14+
'@vue/prettier/@typescript-eslint', // -> eslint-config-prettier/@typescript-eslint
15+
],
16+
rules: {
17+
'@typescript-eslint/no-explicit-any': 'off',
18+
},
19+
},
20+
],
21+
};

dev-modules/.gitignore

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.DS_Store
2+
node_modules
3+
/dist
4+
5+
# local env files
6+
.env.local
7+
.env.*.local
8+
9+
# Log files
10+
npm-debug.log*
11+
yarn-debug.log*
12+
yarn-error.log*
13+
14+
# Editor directories and files
15+
.idea
16+
.vscode
17+
*.suo
18+
*.ntvs*
19+
*.njsproj
20+
*.sln
21+
*.sw?

dev-modules/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# 测试使用远程模块

dev-modules/babel.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
presets: ['@vue/cli-plugin-babel/preset'],
3+
};

dev-modules/package.json

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
{
2+
"name": "dev-modules",
3+
"version": "0.1.3",
4+
"private": true,
5+
"license": "MIT",
6+
"scripts": {
7+
"serve": "node src/server.js",
8+
"build": "concurrently --raw \"yarn build:dymanicRouter\" \"yarn build:dymanicComponent\" \"yarn build:components\"",
9+
"build:dymanicRouter": "node scripts/buildModule.js src/dymanicRouter",
10+
"build:dymanicComponent": "node scripts/buildModule.js src/dymanicComponent",
11+
"build:components": "node scripts/buildModule.js src/componentA src/componentB.vue",
12+
"build:js-test": "node scripts/buildModule.js src/module-js",
13+
"build:ts-test": "node scripts/buildModule.js src/module-ts",
14+
"test:unit": "vue-cli-service test:unit",
15+
"lint": "vue-cli-service lint"
16+
},
17+
"dependencies": {
18+
"@vue-async/utils": "^1.0.3",
19+
"core-js": "^3.6.4",
20+
"vue": "^2.6.9",
21+
"vue-property-decorator": "^8.4.1"
22+
},
23+
"devDependencies": {
24+
"@vue-async/module-loader-typing": "^0.0.2",
25+
"@vue/cli-plugin-babel": "^4.2.0",
26+
"@vue/cli-plugin-eslint": "^4.2.0",
27+
"@vue/cli-plugin-typescript": "^4.3.0",
28+
"@vue/cli-service": "^4.2.0",
29+
"@vue/eslint-config-prettier": "^6.0.0",
30+
"@vue/eslint-config-typescript": "^5.0.2",
31+
"concurrently": "^5.3.0",
32+
"cross-env": "^7.0.2",
33+
"eslint-plugin-vue": "^5.0.0",
34+
"express": "^4.17.1",
35+
"extract-text-webpack-plugin": "^3.0.2",
36+
"less": "^3.11.1",
37+
"less-loader": "^5.0.0",
38+
"lodash.merge": "^4.6.2",
39+
"prettier": "^2.0.5",
40+
"stylus": "^0.54.5",
41+
"stylus-loader": "^3.0.2",
42+
"typescript": "^3.7.2",
43+
"vue-server-renderer": "^2.6.12",
44+
"vue-template-compiler": "^2.6.9",
45+
"webpack-node-externals": "^2.5.2"
46+
}
47+
}

dev-modules/posscss.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
plugins: {
3+
autoprefixer: {},
4+
},
5+
};

dev-modules/scripts/buildModule.js

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
/**
2+
* vue-cli-service build --target lib --name module-test --dest dist/module-test module-test/index.js
3+
*/
4+
5+
const fs = require('fs');
6+
const path = require('path');
7+
const execa = require('execa');
8+
9+
async function exec(name, execFile) {
10+
const { stdout } = await execa(require.resolve('@vue/cli-service/bin/vue-cli-service'), [
11+
'build',
12+
'--target',
13+
'lib',
14+
'--name',
15+
name,
16+
'--formats',
17+
'umd,commonjs',
18+
'--dest',
19+
`dist/${name}`,
20+
execFile,
21+
]);
22+
return stdout;
23+
}
24+
25+
// *.{js,ts,!d.ts}
26+
function isJsOrTsFile(dirent) {
27+
return !dirent.name.endsWith('.d.ts') && ['.js', '.ts'].includes(path.extname(dirent.name));
28+
}
29+
30+
// *.vue
31+
function isVueFile(dirent) {
32+
return ['.vue'].includes(path.extname(dirent.name));
33+
}
34+
35+
async function findFile(rootDir, filename = 'index') {
36+
const dir = await fs.promises.opendir(rootDir);
37+
for await (const dirent of dir) {
38+
const extname = path.extname(dirent.name);
39+
const basename = path.basename(dirent.name, extname);
40+
41+
if (
42+
dirent.isFile() &&
43+
(isJsOrTsFile(dirent) || isVueFile(dirent)) &&
44+
path.basename(dirent.name, extname) === filename
45+
) {
46+
return path.resolve(rootDir, dirent.name);
47+
}
48+
}
49+
}
50+
51+
async function run(files) {
52+
// 指定文件
53+
if (files && files.length) {
54+
for (file of files) {
55+
const fullpath = path.resolve(__dirname, '../', file);
56+
const lstat = await fs.promises.lstat(fullpath);
57+
if (lstat.isFile()) {
58+
const result = await exec(path.basename(fullpath, path.extname(fullpath)), fullpath);
59+
console.log(result);
60+
} else {
61+
const indexFile = await findFile(fullpath);
62+
if (indexFile) {
63+
const result = await exec(path.basename(fullpath), indexFile);
64+
console.log(result);
65+
} else {
66+
console.error('can not find index file!');
67+
}
68+
}
69+
}
70+
} else {
71+
// 所有 src/*.{!d.ts} or src/*/index.{!d.ts}
72+
const rootDir = path.resolve(__dirname, '../src');
73+
74+
const dir = await fs.promises.opendir(rootDir);
75+
for await (const dirent of dir) {
76+
if (dirent.isFile()) {
77+
// 文件
78+
if (!isJsOrTsFile(dirent) && !isVueFile(dirent)) {
79+
continue;
80+
}
81+
82+
const rootFile = path.resolve(rootDir, dirent.name);
83+
const result = await exec(path.basename(dirent.name, path.extname(dirent.name)), rootFile);
84+
console.log(result);
85+
} else {
86+
// 目录=》 index.js/index.ts
87+
const indexFile = await findFile(path.resolve(rootDir, dirent.name));
88+
if (indexFile) {
89+
const result = await exec(dirent.name, indexFile);
90+
console.log(result);
91+
} else {
92+
console.error('can not find index file!');
93+
}
94+
}
95+
}
96+
}
97+
}
98+
99+
async function genJsonFile(filename) {
100+
const distDir = path.resolve(__dirname, '../dist');
101+
const filepath = path.resolve(distDir, `${filename}.json`);
102+
const dir = await fs.promises.opendir(distDir);
103+
const content = {};
104+
for await (const dirent of dir) {
105+
if (dirent.isDirectory()) {
106+
const umdFile = await findFile(path.resolve(distDir, dirent.name), `${dirent.name}.umd.min`);
107+
content[dirent.name] = dirent.name + '/' + path.basename(umdFile);
108+
}
109+
}
110+
fs.writeFile(filepath, JSON.stringify(content), 'utf8', () => {
111+
console.log(`create json file ${filepath} successfully!`);
112+
});
113+
}
114+
115+
if (require.main === module) {
116+
const argv = process.argv.splice(2);
117+
const files = argv.filter((arg) => !arg.startsWith('--'));
118+
const options = argv
119+
.filter((arg) => !files.includes(arg))
120+
.reduce((prev, curr) => {
121+
const keyValue = curr
122+
.substr(2)
123+
.split('=')
124+
.filter((arg) => !!arg);
125+
keyValue.length && (prev[keyValue[0]] = keyValue.length === 1 ? true : keyValue[1]);
126+
return prev;
127+
}, {});
128+
const genJson = run(files)
129+
.then(() => {
130+
// 生成 json 文件
131+
options.json && options.json !== 'false' && genJsonFile(options.json === true ? 'modules' : options.json);
132+
})
133+
.catch((err) => {
134+
// eslint-disable-next-line no-console
135+
console.error(err);
136+
process.exit(1);
137+
});
138+
}
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
## 单个远程组件入在文件夹下面
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<h1 class="title">Remote Commponent A</h1>
3+
</template>
4+
5+
<script>
6+
export default {
7+
name: 'commponent-a',
8+
};
9+
</script>
10+
11+
<style lang="less" scoped>
12+
.title {
13+
color: red;
14+
}
15+
</style>

0 commit comments

Comments
 (0)