From 770a70f5e3fbb3317a94b80725c284ac81d868a4 Mon Sep 17 00:00:00 2001 From: "waliang.wang" Date: Wed, 5 Jul 2017 14:10:06 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=9B=E5=BB=BAYAPI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/App.js | 12 ++++++ client/components/Header.js | 8 ++++ client/components/Header/Logo/Logo.js | 7 ++++ client/containers/Home/Home.js | 11 +++++ client/containers/index.js | 5 +++ client/index.js | 8 ++++ client/model/index.js | 1 + client/routes.js | 11 +++++ client/styles/cs.scss | 5 +++ index.html | 12 ++++++ package.json | 34 ++++++++++++++-- webpack.config.js | 58 +++++++++++++++++++++++++++ 12 files changed, 169 insertions(+), 3 deletions(-) create mode 100644 client/App.js create mode 100644 client/components/Header.js create mode 100644 client/components/Header/Logo/Logo.js create mode 100644 client/containers/Home/Home.js create mode 100644 client/containers/index.js create mode 100644 client/index.js create mode 100644 client/model/index.js create mode 100644 client/routes.js create mode 100644 client/styles/cs.scss create mode 100644 index.html create mode 100644 webpack.config.js diff --git a/client/App.js b/client/App.js new file mode 100644 index 00000000..d7a59564 --- /dev/null +++ b/client/App.js @@ -0,0 +1,12 @@ +import React, { Component } from 'react' +import Routes from './routes' +import './styles/cs.scss' +// import './styles/cs.less' + +class App extends Component { + render() { + return + } +} + +export default App diff --git a/client/components/Header.js b/client/components/Header.js new file mode 100644 index 00000000..8850689a --- /dev/null +++ b/client/components/Header.js @@ -0,0 +1,8 @@ +import React from 'react' +import Logo from './Header/Logo/Logo.js' + +export default function () { + return ( + + ) +} diff --git a/client/components/Header/Logo/Logo.js b/client/components/Header/Logo/Logo.js new file mode 100644 index 00000000..ec9e6a79 --- /dev/null +++ b/client/components/Header/Logo/Logo.js @@ -0,0 +1,7 @@ +import React from 'react' + +export default _ => { + return ( +

这是LOGO3

+ ) +} \ No newline at end of file diff --git a/client/containers/Home/Home.js b/client/containers/Home/Home.js new file mode 100644 index 00000000..972fc218 --- /dev/null +++ b/client/containers/Home/Home.js @@ -0,0 +1,11 @@ +import React from 'react' +import Header from '../../components/Header.js' + +export default _ => { + return ( + +
+

首页

+ + ) +} \ No newline at end of file diff --git a/client/containers/index.js b/client/containers/index.js new file mode 100644 index 00000000..717bd103 --- /dev/null +++ b/client/containers/index.js @@ -0,0 +1,5 @@ +import Home from './Home/Home.js' + +export { + Home +} \ No newline at end of file diff --git a/client/index.js b/client/index.js new file mode 100644 index 00000000..dd412178 --- /dev/null +++ b/client/index.js @@ -0,0 +1,8 @@ +import React from 'react' +import ReactDOM from 'react-dom' +import App from './App' + +ReactDOM.render( + , + document.getElementById('yapi') +) \ No newline at end of file diff --git a/client/model/index.js b/client/model/index.js new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/client/model/index.js @@ -0,0 +1 @@ + diff --git a/client/routes.js b/client/routes.js new file mode 100644 index 00000000..4dfb7058 --- /dev/null +++ b/client/routes.js @@ -0,0 +1,11 @@ +import React from 'react' +import { BrowserRouter as Router, Route, Link } from 'react-router-dom' +import { Home } from './containers/index' + +export default store => { + return ( + + + + ) +} \ No newline at end of file diff --git a/client/styles/cs.scss b/client/styles/cs.scss new file mode 100644 index 00000000..c09207b9 --- /dev/null +++ b/client/styles/cs.scss @@ -0,0 +1,5 @@ +html { + body { + border: 1px #000 solid; + } +} diff --git a/index.html b/index.html new file mode 100644 index 00000000..c70cd01b --- /dev/null +++ b/index.html @@ -0,0 +1,12 @@ + + + + + +my yApi + + +
+ + + diff --git a/package.json b/package.json index 717cf7ea..7bc157a3 100644 --- a/package.json +++ b/package.json @@ -30,14 +30,42 @@ }, "devDependencies": { "babel-cli": "^6.24.1", - "babel-plugin-transform-runtime": "^6.23.0", - "babel-preset-es2015": "^6.24.1", "babel-preset-stage-3": "^6.24.1", "fs-extra": "^3.0.1", "gulp": "^3.9.1", "gulp-babel": "^6.1.2", "gulp-watch": "^4.3.11", - "nodemon": "^1.11.0" + "nodemon": "^1.11.0", + "axios": "^0.16.2", + "babel": "^6.5.2", + "babel-core": "^6.8.0", + "babel-eslint": "^6.0.4", + "babel-loader": "^6.2.4", + "babel-plugin-transform-decorators-legacy": "^1.3.4", + "babel-plugin-transform-object-rest-spread": "^6.8.0", + "babel-plugin-transform-runtime": "^6.9.0", + "babel-preset-es2015": "^6.9.0", + "babel-preset-react": "^6.5.0", + "babel-register": "^6.9.0", + "babel-runtime": "^6.9.2", + "buffer-shims": "^1.0.0", + "extract-text-webpack-plugin": "^2.1.2", + "less": "^2.7.2", + "less-loader": "^4.0.4", + "node-sass": "^4.5.3", + "prop-types": "^15.5.10", + "react": "^15.6.1", + "react-dom": "^15.6.1", + "react-redux": "^5.0.5", + "react-router-dom": "^4.1.1", + "react-router-redux": "^4.0.8", + "react-scripts": "1.0.10", + "sass-loader": "^6.0.6", + "scss-loader": "0.0.1", + "webpack": "^2.0.0", + "webpack-node-externals": "^1.6.0", + "css-loader": "^0.28.4", + "style-loader": "^0.18.2" }, "engines": { "node": ">= 6.0.0", diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 00000000..4d4086be --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,58 @@ +const webpack = require('webpack') +const path = require('path') +const nodeExternals = require('webpack-node-externals') +const ExtractTextPlugin = require("extract-text-webpack-plugin") + +module.exports = { + // context: 如果不通过path.resolve 配置入口访问路径 watch: true失效 + context: path.resolve('./client'), + + entry: { + index: './index.js', + }, + + output: { + // filename: 编译的文件名 仅用于命名每个文件 + // [name]: 多入口形式 入口文件名替换这里的name + // [chunkhash: num]: 入口文件的hash值 用于修改后清空缓存 + // filename: '[name].[chunkhash:3].js', + filename: './[name].js', + // 包存放的目录 + path: path.resolve('./build'), + }, + // target: 'node', + // externals: [nodeExternals()], + module: { + noParse: /\.css$/, + + rules: [ + { + test: /\.scss$/, + use: [ + { + loader: "style-loader" + }, + { + loader: "css-loader" + }, + { + loader: "sass-loader" + } + ] + }, + { + test: /\.(jsx|js)?$/, + exclude: /node_modules/, + use: { + loader: 'babel-loader', + options: { + presets: ['es2015', 'react'] + } + } + } + ] + }, + + watch: true +} +