Skip to content

Commit fe390d3

Browse files
author
wangxianming
committed
vue 粗略版本
1 parent 3ae5a3a commit fe390d3

23 files changed

Lines changed: 469 additions & 58 deletions

File tree

‎build/template/vue2/app.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
module.exports = ({ ui }) => {
2+
const commonText = `import React from 'react';`;
3+
let text;
4+
5+
if (ui === 'antd') {
6+
text = `${commonText}
7+
import { Button } from 'antd';
8+
9+
export default class extends React.Component {
10+
render() {
11+
return (
12+
<>
13+
<Button>Hello world!</Button>
14+
</>
15+
);
16+
}
17+
}`;
18+
} else {
19+
text = `${commonText}
20+
export default class extends React.Component {
21+
render () {
22+
return (
23+
<>
24+
<h1>Hello world!</h1>
25+
</>
26+
);
27+
}
28+
}`;
29+
}
30+
return {
31+
text,
32+
file: 'App.jsx',
33+
};
34+
};

‎build/template/vue2/index.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const indexJs = require('./indexJs');
2+
const indexHtml = require('./indexHtml');
3+
const app = require('./app');
4+
5+
module.exports = {
6+
indexHtml,
7+
indexJs,
8+
app,
9+
};

‎build/template/vue2/indexHtml.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
module.exports = ({ projectName }) => {
2+
return {
3+
file: 'index.html',
4+
text: `<!DOCTYPE html>
5+
<html lang="en">
6+
<head>
7+
<meta charset="UTF-8">
8+
<title>${projectName}</title>
9+
</head>
10+
<body>
11+
<div id="app"></div>
12+
<script type="module" src="index.js"></script>
13+
</body>
14+
</html>`,
15+
};
16+
};

‎build/template/vue2/indexJs.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
module.exports = ({ ui }) => {
2+
const headerText = `import React from 'react';
3+
import ReactDOM from 'react-dom';
4+
import App from './App';`;
5+
6+
const bodyText = `const mountNode = document.getElementById('app');
7+
ReactDOM.render(<App />, mountNode);`;
8+
let text;
9+
10+
if (ui === 'antd') {
11+
text = `${headerText}
12+
import 'antd/dist/antd.css';
13+
14+
${bodyText}`;
15+
} else {
16+
text = `${headerText}
17+
18+
${bodyText}`;
19+
}
20+
return {
21+
text,
22+
file: 'index.jsx',
23+
};
24+
};

‎build/webpack/config.js‎

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,41 @@ const { join } = require('path');
22

33
module.exports = {
44
noMainTemplatePath: join(__dirname, 'template'),
5-
react17TemplatePath: join(__dirname, 'template-react17'),
6-
vue2TemplatePath: join(__dirname, 'template-vue2'),
5+
react17CommonTemplatePath: join(__dirname, 'template-react17/common'),
6+
vue2NoneTemplatePath: join(__dirname, 'template-vue2/none'),
7+
vue2ElementTemplatePath: join(__dirname, 'template-vue2/element'),
8+
vue2CommonTemplatePath: join(__dirname, 'template-vue2/common'),
9+
templatePackageJson: {
10+
"name": "empty-project",
11+
"version": "1.0.0",
12+
"description": "",
13+
"main": "index.js",
14+
"keywords": [],
15+
"author": "",
16+
"license": "ISC",
17+
"scripts": {
18+
"clean": "rm dist/bundle.js",
19+
"dev": "webpack --mode development",
20+
"build": "webpack --mode production"
21+
},
22+
"dependencies": {
23+
},
24+
"devDependencies": {
25+
"webpack": "^5.46.0",
26+
"webpack-cli": "^4.7.2",
27+
"babel-loader": "^8.2.2",
28+
"@babel/core": "^7.14.8",
29+
"@babel/preset-env": "^7.14.8",
30+
"css-loader": "^6.2.0",
31+
"html-webpack-plugin": "^5.3.2",
32+
"file-loader": "^6.2.0",
33+
"url-loader": "^4.1.1"
34+
}
35+
},
36+
templateWebpackConfig: {
37+
mount: {
38+
dist: '/',
39+
src: '/',
40+
},
41+
},
742
};

‎build/webpack/index.js‎

Lines changed: 66 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,80 @@
1-
const { copySync, removeSync, ensureDir } = require('fs-extra');
1+
const { copySync, removeSync, ensureDirSync, outputFileSync, writeJsonSync } = require('fs-extra');
22
const { join } = require('path');
33

4-
const {
5-
main: customMain,
6-
outputPath: customOutputPath,
7-
projectName: customProjectName,
8-
} = require('../config');
9-
const { getTemplate } = require('./utils');
4+
const { getInitTemplate, getCommonTemplate, getPackageJson, getWebpackConfigJson } = require('./utils');
5+
106
const { setPackageProps, addReadMe } = require('../utils');
117

12-
const tempPath = join(__dirname, 'temp');
8+
const {
9+
indexHtml: getIndexHtml,
10+
indexJs: getIndexJs,
11+
app: getApp,
12+
} = require('../template/vue2');
1313

14-
const init = () => {
15-
removeSync(customOutputPath);
16-
removeSync(tempPath);
17-
ensureDir(tempPath);
14+
const init = root => {
15+
removeSync(root);
16+
ensureDirSync(root);
1817
};
1918

20-
const process = () => {
21-
copySync(getTemplate(customMain), tempPath);
19+
const process = config => {
20+
const {
21+
mainFramework: main,
22+
uiFramework: ui,
23+
projectName,
24+
$resolveRoot: root,
25+
templatePath,
26+
} = config;
27+
28+
// main:react
29+
const resolveTemplatePath = join(root, templatePath);
30+
31+
// todo remove this condition when vue/none framework done
32+
if (main === 'react') {
33+
// generate index.html
34+
const html = getIndexHtml({ projectName });
35+
outputFileSync(join(resolveTemplatePath, html.file), html.text);
36+
37+
// generate index.js/jsx
38+
const js = getIndexJs({ ui });
39+
outputFileSync(join(resolveTemplatePath, js.file), js.text);
40+
41+
// generate App.js/jsx
42+
const appObj = getApp({ ui });
43+
outputFileSync(join(resolveTemplatePath, appObj.file), appObj.text);
44+
45+
// copy common files
46+
copySync(getCommonTemplate(main), root);
47+
48+
// generate package.json
49+
writeJsonSync(join(root, 'package.json'), getPackageJson({ ui, main }), {
50+
spaces: 2,
51+
});
2252

23-
// change package.json name
24-
setPackageProps(join(tempPath, 'package.json'), {
25-
name: customProjectName,
26-
});
53+
// generate snowpack.config.json
54+
writeJsonSync(
55+
join(root, 'webpack.config.js'),
56+
getWebpackConfigJson({ ui }),
57+
{
58+
spaces: 2,
59+
},
60+
);
61+
} else {
62+
// main:vue/none
63+
copySync(getInitTemplate(main, ui), root);
64+
// copy common files
65+
copySync(getCommonTemplate(main), root);
2766

67+
// change package.json name
68+
setPackageProps(join(root, 'package.json'), {
69+
name: projectName,
70+
});
71+
}
2872
// add overview info to readme.md
29-
addReadMe(join(tempPath, 'README.md'), customProjectName);
73+
addReadMe(join(root, 'README.md'), projectName);
3074
};
3175

32-
const output = () => {
33-
copySync(tempPath, customOutputPath);
34-
removeSync(tempPath);
76+
module.exports = config => {
77+
init(config.$resolveRoot);
78+
process(config);
3579
};
3680

37-
init();
38-
process();
39-
output();

‎build/webpack/template-react17/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
"license": "ISC",
99
"scripts": {
1010
"clean": "rm dist/bundle.js",
11-
"build-dev": "webpack --mode development",
12-
"build-prod": "webpack --mode production",
11+
"dev": "webpack --mode development",
12+
"build": "webpack --mode production",
1313
"start": "webpack serve --hot --mode development"
1414
},
1515
"dependencies": {

build/webpack/template-vue2/.babelrc renamed to build/webpack/template-vue2/element/.babelrc

File renamed without changes.

build/webpack/template-vue2/.gitignore renamed to build/webpack/template-vue2/element/.gitignore

File renamed without changes.

build/webpack/template-vue2/README.md renamed to build/webpack/template-vue2/element/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# empty-project
22

3-
Empty project1.
3+
Empty project.
44

55
## Building and running on localhost
66

0 commit comments

Comments
 (0)