初始化项目

.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+node_modules/
+src/pages/*/dist/

README.md

@@ -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]
+```

app.js

@@ -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);

package.json

@@ -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": {}
+}

src/pages/20181024q9/config.json

@@ -0,0 +1,8 @@
+{
+	"template": "react",
+	"style": "css",
+	"filename":"index.js",
+	"proxy": {
+      "/api": "http://localhost:3000"
+    }
+}

src/pages/20181024q9/src/components/app.css

@@ -0,0 +1,6 @@
+.app {
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+  color: #ccc;
+}

src/pages/20181024q9/src/components/app.js

@@ -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;

src/pages/20181024q9/src/index.css

@@ -0,0 +1,10 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
+
+#root {
+  width: 100%;
+  height: 100%;
+}

src/pages/20181024q9/src/index.html

@@ -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>

src/pages/20181024q9/src/index.js

@@ -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'));

src/pages/20181025j0/config.json

@@ -0,0 +1,8 @@
+{
+  "template": "react",
+  "style": "css",
+  "filename":"index.js",
+  "proxy": {
+      "/api": "http://localhost:3000"
+    }
+}

src/pages/20181025j0/src/components/app.css

@@ -0,0 +1,5 @@
+.app {
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+}

src/pages/20181025j0/src/components/app.js

@@ -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;

src/pages/20181025j0/src/index.css

@@ -0,0 +1,10 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
+
+#root {
+  width: 100%;
+  height: 100%;
+}

src/pages/20181025j0/src/index.html

@@ -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>

src/pages/20181025j0/src/index.js

@@ -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'));

src/pages/20181112o4/config.json

@@ -0,0 +1,7 @@
+{
+  "template": "react",
+  "style": "css",
+  "proxy": {
+      "/api": "http://localhost:3000"
+    }
+}

src/pages/20181112o4/src/components/app.css

@@ -0,0 +1,5 @@
+.app {
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+}

src/pages/20181112o4/src/components/app.js

@@ -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;

src/pages/20181112o4/src/index.css

@@ -0,0 +1,10 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
+
+#root {
+  width: 100%;
+  height: 100%;
+}

src/pages/20181112o4/src/index.html

@@ -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>

src/pages/20181112o4/src/index.js

@@ -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'));

src/pages/20181112t6/config.json

@@ -0,0 +1,7 @@
+{
+  "template": "react",
+  "style": "css",
+  "proxy": {
+      "/api": "http://localhost:3000"
+    }
+}

src/pages/20181112t6/src/components/app.css

@@ -0,0 +1,5 @@
+.app {
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+}

src/pages/20181112t6/src/components/app.js

@@ -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;

src/pages/20181112t6/src/index.css

@@ -0,0 +1,10 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
+
+#root {
+  width: 100%;
+  height: 100%;
+}

src/pages/20181112t6/src/index.html

@@ -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>

src/pages/20181112t6/src/index.js

@@ -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'));

task/task.js

@@ -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);
+	}
+}

task/util.js

@@ -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);
+// 	});
+// }

task/webpack.react.js

@@ -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('打包编译完成！'));
+		});
+	}
+}

template/react/config.json

@@ -0,0 +1,7 @@
+{
+  "template": "react",
+  "style": "css",
+  "proxy": {
+      "/api": "http://localhost:3000"
+    }
+}

template/react/src/components/app.css

@@ -0,0 +1,5 @@
+.app {
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+}

template/react/src/components/app.js

@@ -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;

template/react/src/index.css

@@ -0,0 +1,10 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
+
+#root {
+  width: 100%;
+  height: 100%;
+}

template/react/src/index.html

@@ -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>

template/react/src/index.js

@@ -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'));