初始化项目
This commit is contained in:
dengtongyu committed
commit
4ab6cf96c0
38 files changed
+8362
No files matched your search
@@ -0,0 +1,3 @@
|
||||
.DS_Store
|
||||
node_modules/
|
||||
src/pages/*/dist/
|
||||
@@ -0,0 +1,31 @@
|
||||
react 开发工作流
|
||||
|
||||
初始化
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
目录结构
|
||||
```sh
|
||||
>根
|
||||
>>src---------开发源码
|
||||
>>>lib--------库文件
|
||||
>>>pages------页面源码
|
||||
>>task--------构建任务
|
||||
>>template----模板
|
||||
>>>react------react模板
|
||||
```
|
||||
|
||||
创建新项目
|
||||
```sh
|
||||
node app init --type|-t [template] --name|-n [pathName]
|
||||
```
|
||||
|
||||
开发已有项目
|
||||
```sh
|
||||
npm run dev --name|-n [pathName]
|
||||
```
|
||||
|
||||
打包已有项目
|
||||
```sh
|
||||
npm run pack --name|-n [pathName]
|
||||
```
|
||||
@@ -0,0 +1,169 @@
|
||||
#! /usr/bin/env node
|
||||
|
||||
const program = require('commander');
|
||||
const inquirer = require('inquirer');
|
||||
const chalk = require('chalk');
|
||||
const util = require('./task/util');
|
||||
const task = require('./task/task');
|
||||
const package = require("./package.json");
|
||||
|
||||
program
|
||||
.version(package.version)
|
||||
.command('init')
|
||||
.alias('i')
|
||||
.option('-t, --type [template]', '模版类型（react）')
|
||||
.option('-n, --name [pathName]', '构建路径名称')
|
||||
.description('初始化一个项目')
|
||||
.action(option => {
|
||||
let config = Object.assign({
|
||||
tpl: 0,
|
||||
name: null
|
||||
}, option)
|
||||
|
||||
//console.log(config)
|
||||
|
||||
let promps = [];
|
||||
|
||||
if(!config.tpl) {
|
||||
promps.push({
|
||||
type: 'list',
|
||||
name: 'tpl',
|
||||
message: '请选择需要创建的模板：',
|
||||
choices: [
|
||||
{
|
||||
name: 'react',
|
||||
value: 'react'
|
||||
},
|
||||
{
|
||||
name: 'tpl',
|
||||
value: 'tpl'
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
|
||||
if(!config.name) {
|
||||
promps.push({
|
||||
type: 'input',
|
||||
name: 'name',
|
||||
message: '请输入需要创建的路径名:',
|
||||
default: util.randomActName()
|
||||
})
|
||||
}
|
||||
|
||||
inquirer.prompt(promps).then(function (answers) {
|
||||
//console.log('\n',answers)
|
||||
option = Object.assign(answers,option);
|
||||
//console.log(option);
|
||||
|
||||
let paths = util.paths(option.name, __dirname);
|
||||
task.init(option.tpl, paths, option._name);
|
||||
}).catch((err) => {
|
||||
console.log(err);
|
||||
})
|
||||
})
|
||||
|
||||
program
|
||||
.command('dev')
|
||||
.alias('d')
|
||||
.option('-n, --name [pathName]', '开发路径名称')
|
||||
.description('开发一个已存在的项目')
|
||||
.action(option => {
|
||||
let config = Object.assign({
|
||||
name: null
|
||||
}, option)
|
||||
|
||||
//console.log(config)
|
||||
|
||||
let promps = [];
|
||||
|
||||
if(!config.name) {
|
||||
promps.push({
|
||||
type: 'input',
|
||||
name: 'name',
|
||||
message: '请输入需要开发的路径名:',
|
||||
validate: function (input){
|
||||
if(!input) {
|
||||
return '不能为空'
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
inquirer.prompt(promps).then(function (answers) {
|
||||
//console.log('\n',answers)
|
||||
option = Object.assign(answers,option);
|
||||
//console.log(option);
|
||||
let paths = util.paths(option.name, __dirname);
|
||||
|
||||
let exi = util.pathExists(option.name, __dirname);
|
||||
exi.then(result => {
|
||||
//console.log(result);
|
||||
if(!result) {
|
||||
console.log(chalk.red('没有该目录:') + chalk.bold.red(paths.targetPath) + chalk.red('，请重新输入'));
|
||||
return;
|
||||
}
|
||||
task.dev(paths, option._name);
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
|
||||
}).catch((err) => {
|
||||
console.log(err);
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
program
|
||||
.command('pack')
|
||||
.alias('p')
|
||||
.description('打包构建一个已存在的项目')
|
||||
.option('-n, --name [pathName]', '打包构建路径名称')
|
||||
.action(option => {
|
||||
let config = Object.assign({
|
||||
name: null
|
||||
}, option)
|
||||
|
||||
//console.log(config)
|
||||
|
||||
let promps = [];
|
||||
|
||||
if(!config.name) {
|
||||
promps.push({
|
||||
type: 'input',
|
||||
name: 'name',
|
||||
message: '请输入需要打包构建的路径名:',
|
||||
validate: function (input){
|
||||
if(!input) {
|
||||
return '不能为空'
|
||||
}
|
||||
return true
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
inquirer.prompt(promps).then(function (answers) {
|
||||
//console.log('\n',answers)
|
||||
option = Object.assign(answers,option);
|
||||
//console.log(option.name);
|
||||
let paths = util.paths(option.name, __dirname);
|
||||
|
||||
let exi = util.pathExists(option.name, __dirname);
|
||||
exi.then(result => {
|
||||
//console.log(result);
|
||||
if(!result) {
|
||||
console.log(chalk.red('没有该目录:') + chalk.bold.red(paths.targetPath) + chalk.red('，请重新输入'));
|
||||
return;
|
||||
}
|
||||
task.pack(paths, option._name);
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
}).catch((err) => {
|
||||
console.log(err);
|
||||
})
|
||||
});
|
||||
|
||||
program.parse(process.argv);
|
||||
Generated
+7579
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,37 @@
|
||||
{
|
||||
"name": "wdp",
|
||||
"version": "1.0.0",
|
||||
"description": "web dev pack",
|
||||
"main": "index.js",
|
||||
"bin": {
|
||||
"wdp": "app"
|
||||
},
|
||||
"scripts": {
|
||||
"new": "node app init",
|
||||
"dev": "node app dev",
|
||||
"pack": "node app pack"
|
||||
},
|
||||
"author": "dengtongyu",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.1.2",
|
||||
"@babel/plugin-proposal-function-bind": "^7.0.0",
|
||||
"@babel/preset-env": "^7.1.0",
|
||||
"@babel/preset-react": "^7.0.0",
|
||||
"babel-loader": "^8.0.4",
|
||||
"chalk": "^2.4.1",
|
||||
"commander": "^2.19.0",
|
||||
"css-loader": "^1.0.0",
|
||||
"fs-extra": "^7.0.0",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"inquirer": "^6.2.0",
|
||||
"less": "^3.8.1",
|
||||
"less-loader": "^4.1.0",
|
||||
"react": "^16.5.2",
|
||||
"react-dom": "^16.5.2",
|
||||
"style-loader": "^0.23.1",
|
||||
"webpack": "^4.25.1",
|
||||
"webpack-dev-server": "^3.1.10"
|
||||
},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"template": "react",
|
||||
"style": "css",
|
||||
"filename":"index.js",
|
||||
"proxy": {
|
||||
"/api": "http://localhost:3000"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
.app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
color: #ccc;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import './app.css';
|
||||
|
||||
class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="app">
|
||||
你好，世界！
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default App;
|
||||
@@ -0,0 +1,10 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="theme-color" content="#000000">
|
||||
<title>Examples</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<link href="" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
You need to enable JavaScript to run this app.
|
||||
</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,7 @@
|
||||
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './components/App';
|
||||
import './index.css';
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"template": "react",
|
||||
"style": "css",
|
||||
"filename":"index.js",
|
||||
"proxy": {
|
||||
"/api": "http://localhost:3000"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
.app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import './app.css';
|
||||
|
||||
class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="app">
|
||||
Hello World!
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default App;
|
||||
@@ -0,0 +1,10 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="theme-color" content="#000000">
|
||||
<title>Examples</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<link href="" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
You need to enable JavaScript to run this app.
|
||||
</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,7 @@
|
||||
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './components/App';
|
||||
import './index.css';
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"template": "react",
|
||||
"style": "css",
|
||||
"proxy": {
|
||||
"/api": "http://localhost:3000"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
.app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import './app.css';
|
||||
|
||||
class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="app">
|
||||
Hello World!
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default App;
|
||||
@@ -0,0 +1,10 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="theme-color" content="#000000">
|
||||
<title>Examples</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<link href="" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
You need to enable JavaScript to run this app.
|
||||
</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,7 @@
|
||||
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './components/App';
|
||||
import './index.css';
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"template": "react",
|
||||
"style": "css",
|
||||
"proxy": {
|
||||
"/api": "http://localhost:3000"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
.app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import './app.css';
|
||||
|
||||
class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="app">
|
||||
Hello World!
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default App;
|
||||
@@ -0,0 +1,10 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="theme-color" content="#000000">
|
||||
<title>Examples</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<link href="" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
You need to enable JavaScript to run this app.
|
||||
</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,7 @@
|
||||
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './components/App';
|
||||
import './index.css';
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
@@ -0,0 +1,50 @@
|
||||
|
||||
const path = require('path');
|
||||
const fs = require('fs-extra');
|
||||
const chalk = require('chalk');
|
||||
const webpack = require('webpack');
|
||||
const webpackDevServer = require('webpack-dev-server');
|
||||
const util = require('./util');
|
||||
const webpackConfig = require('./webpack.react');
|
||||
|
||||
let _paths = {};
|
||||
|
||||
let _configJson = {};
|
||||
|
||||
exports.init = (type, paths, command) => {
|
||||
_paths = paths;
|
||||
|
||||
let tplPath = path.join(_paths.rootPath, util.tplTypePath(type));
|
||||
fs.copy(tplPath, _paths.targetPath)
|
||||
.then(() => {
|
||||
console.log(chalk.bold.green('生成模板成功!'));
|
||||
|
||||
_configJson = util.configJson(_paths.targetPath);
|
||||
|
||||
if(_configJson.template == 'react') {
|
||||
webpackConfig.run(command);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
console.error(chalk.bold.red('生成模板失败!'));
|
||||
});
|
||||
}
|
||||
|
||||
exports.dev = (paths, command) => {
|
||||
_paths = paths;
|
||||
|
||||
if(_configJson.template == 'react') {
|
||||
webpackConfig.run(paths, command);
|
||||
}
|
||||
}
|
||||
|
||||
exports.pack = (paths, command) => {
|
||||
_paths = paths;
|
||||
|
||||
_configJson = util.configJson(_paths.targetPath);
|
||||
|
||||
if(_configJson.template == 'react') {
|
||||
webpackConfig.run(paths, command);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
const path = require('path');
|
||||
const fs = require('fs-extra');
|
||||
//const inquirer = require('inquirer');
|
||||
|
||||
//随机路径名
|
||||
exports.randomActName = () => {
|
||||
let d = new Date();
|
||||
let m = (d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1).toString();
|
||||
let dd = d.getDate() < 10 ? '0' + d.getDate() : d.getDate();
|
||||
let str = d.getFullYear() + m + dd + String.fromCharCode(Math.floor(Math.random() * 26) + "a".charCodeAt(0)) + Math.floor(Math.random() * 10);
|
||||
|
||||
return str;
|
||||
}
|
||||
|
||||
//模板路径名
|
||||
exports.tplTypePath = (type) => {
|
||||
let _path = '';
|
||||
if(type) {
|
||||
_path = path.join('template', type);
|
||||
}else{
|
||||
_path = path.join('template', 'react');
|
||||
}
|
||||
return _path;
|
||||
}
|
||||
|
||||
|
||||
//初始化后的路径信息
|
||||
exports.paths = (pathName, rootPath) => {
|
||||
return {
|
||||
pathName:pathName,
|
||||
rootPath:rootPath,
|
||||
targetPath:path.join(rootPath, 'src', 'pages' , pathName)
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
//获取项目config
|
||||
exports.configJson = (targetPath) => {
|
||||
let jsonPath = path.join(targetPath, 'config.json');
|
||||
|
||||
return require(jsonPath);
|
||||
}
|
||||
|
||||
//是否存在该目录
|
||||
exports.pathExists = async (pathName, rootPath) => {
|
||||
let targetPath = path.join(rootPath, 'src', 'pages' , pathName);
|
||||
let exists = await fs.pathExists(targetPath);
|
||||
return exists;
|
||||
// if(exists) {
|
||||
// return true;
|
||||
// }else{
|
||||
// return '没有该目录，请重新输入'
|
||||
// }
|
||||
}
|
||||
|
||||
//会话流
|
||||
// exports.inquirer = (option, promps, cb) => {
|
||||
// inquirer.prompt(promps).then(function (answers) {
|
||||
// //console.log('\n',answers)
|
||||
// option = Object.assign(answers,option);
|
||||
|
||||
// if(cb) cb(option);
|
||||
// });
|
||||
// }
|
||||
@@ -0,0 +1,111 @@
|
||||
const path = require('path');
|
||||
const chalk = require('chalk');
|
||||
const webpack = require('webpack');
|
||||
const webpackDevServer = require('webpack-dev-server');
|
||||
const HtmlWebPackPlugin = require('html-webpack-plugin');
|
||||
const util = require('./util');
|
||||
|
||||
let _webpackConfig = {
|
||||
module:{
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: [
|
||||
'@babel/preset-react',
|
||||
'@babel/preset-env'
|
||||
],
|
||||
plugins: [
|
||||
["@babel/plugin-proposal-function-bind"]
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ['style-loader', 'css-loader']
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins:[]
|
||||
};
|
||||
|
||||
exports.run = (paths, command) => {
|
||||
|
||||
//入口文件
|
||||
_webpackConfig.entry = path.join(paths.targetPath, 'src', 'index.js');
|
||||
|
||||
//输出路径
|
||||
_webpackConfig.output = {
|
||||
path: path.join(paths.targetPath, 'dist'),
|
||||
filename: 'index.js'
|
||||
}
|
||||
|
||||
_webpackConfig.plugins.push(
|
||||
new HtmlWebPackPlugin({
|
||||
template: path.join(paths.targetPath, 'src', 'index.html'),
|
||||
filename: path.join(paths.targetPath, 'dist', 'index.html')
|
||||
})
|
||||
);
|
||||
|
||||
//console.log(_webpackConfig,paths);
|
||||
|
||||
let _configJson = util.configJson(paths.targetPath);
|
||||
|
||||
let compiler = null;
|
||||
|
||||
if(command == 'init' || command == 'dev') {
|
||||
_webpackConfig.mode = 'development';
|
||||
|
||||
let devServer = {
|
||||
contentBase: path.join(paths.targetPath, "dist"),
|
||||
compress: true,
|
||||
host: 'localhost',
|
||||
port: 8088,
|
||||
hot: true,
|
||||
//open: true,
|
||||
stats: {colors: true}
|
||||
}
|
||||
|
||||
if(_configJson.proxy) {
|
||||
devServer.proxy = _configJson.proxy;
|
||||
}
|
||||
|
||||
//node api 启动热更新
|
||||
_webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
|
||||
webpackDevServer.addDevServerEntrypoints(_webpackConfig, devServer);
|
||||
|
||||
compiler = webpack(_webpackConfig);
|
||||
|
||||
//node api 启动本地服务
|
||||
let server = new webpackDevServer(compiler, devServer);
|
||||
|
||||
console.log(_webpackConfig);
|
||||
|
||||
server.listen(devServer.port, 'localhost', (err) => {
|
||||
if(err) {
|
||||
console.log(err);
|
||||
}else{
|
||||
console.log(chalk.bold.green('服务启动: '+ devServer.contentBase +' : http://localhost:' + devServer.port));
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
if(command == 'pack') {
|
||||
_webpackConfig.mode = 'production';
|
||||
|
||||
compiler = webpack(_webpackConfig, (err, stats) => {
|
||||
if (err || stats.hasErrors()) {
|
||||
//处理错误
|
||||
console.error(err);
|
||||
}
|
||||
|
||||
//处理完成
|
||||
console.log(chalk.bold.green('打包编译完成！'));
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"template": "react",
|
||||
"style": "css",
|
||||
"proxy": {
|
||||
"/api": "http://localhost:3000"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
.app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import './app.css';
|
||||
|
||||
class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="app">
|
||||
Hello World!
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default App;
|
||||
@@ -0,0 +1,10 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="theme-color" content="#000000">
|
||||
<title>Examples</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<link href="" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
You need to enable JavaScript to run this app.
|
||||
</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,7 @@
|
||||
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './components/App';
|
||||
import './index.css';
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
Reference in new issue
Block a user