1.新建项目文件夹
项目文件夹.png
2.文件夹文件（进入src文件夹，创建entries文件夹，在entries文件夹里新建index.html、index.css、index.js三个文件）
项目文件.png
里层文件.png
package.json内容如下
{
"private": true,
"entry": {},
"dependencies": {
"antd": "^1.1.0",
"atool-build": "0.7.x",
"babel-plugin-antd": "0.4.x",
"babel-plugin-transform-runtime": "^6.8.0",
"babel-runtime": "^6.6.1",
"classnames": "^2.2.3",
"es3ify-loader": "^0.2.0",
"history": "^2.0.1",
"isomorphic-fetch": "^2.2.1",
"js-cookie": "^2.1.1",
"react": "^15.3.2",
"react-dom": "^15.0.2",
"react-redux": "^4.4.5",
"react-router": "^2.0.1",
"spmhandlebars-loader": "^0.1.0"
},
"devDependencies": {
"atool-test-mocha": "^0.1.4",
"babel-eslint": "^6.0.0",
"dora": "0.3.x",
"dora-plugin-browser-history": "^0.1.1",
"dora-plugin-hmr": "0.6.x",
"dora-plugin-livereload": "0.3.x",
"dora-plugin-proxy": "0.6.x",
"dora-plugin-webpack": "0.6.x",
"eslint": "^2.7.0",
"eslint-config-airbnb": "6.x",
"eslint-plugin-react": "4.x",
"expect": "^1.20.1",
"glob": "^7.0.3",
"pre-commit": "1.x",
"react-redux": "^4.4.5",
"redux": "^3.5.2"
},
"pre-commit": [
"lint"
],
"scripts": {
"build": "atool-build",
"lint": "eslint --ext .js,.jsx src",
"start": "dora -p 8001 --plugins \"webpack,hmr,proxy,livereload?enableJs=false&injectHost=127.0.0.1,browser-history?index=/src/entries/index.html\"",
"test": "atool-test-mocha ./src/**/__tests__/*-test.js"
}
}
webpack.config.js内容如下
// Learn more on how to config.
// - https://github.com/ant-tool/atool-build#配置扩展
const webpack = require('atool-build/lib/webpack');
const fs = require('fs');
const path = require('path');
const glob = require('glob');
module.exports = function(webpackConfig) {
webpackConfig.babel.plugins.push('transform-runtime');
webpackConfig.babel.plugins.push(['antd', {
style: 'css', // if true, use less
}]);
// Enable this if you have to support IE8.
// webpackConfig.module.loaders.unshift({
// test: /\.jsx?$/,
// loader: 'es3ify-loader',
// });
// Parse all less files as css module.
webpackConfig.module.loaders.forEach(function(loader, index) {
if (typeof loader.test === 'function' && loader.test.toString().indexOf('\\.less$') > -1) {
loader.test = /\.dont\.exist\.file/;
}
if (loader.test.toString() === '/\\.module\\.less$/') {
loader.test = /\.less$/;
}
});
webpackConfig.module.loaders.push({
test: /\.handlebars$/,
loader: 'spmhandlebars-loader'
});
// Load src/entries/*.js as entry automatically.
const files = glob.sync('./src/entries/*.js');
const newEntries = files.reduce(function(memo, file) {
const name = path.basename(file, '.js');
memo[name] = file;
return memo;
}, {});
webpackConfig.entry = Object.assign({}, webpackConfig.entry, newEntries);
return webpackConfig;
};
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="root"></div>
<script src="common.js"></script>
<script src="index.js"></script>
</body>
</html>
index.css
html, body, #root {
height: 100%;
}
.box{
background:red;
}
index.js
import React，{Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// ES6语法创建组件
class App extends Component() {
constructor(props) {
super(props);
}
render(){
return (
<div className="box">demo</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
- src 同层目录下 右击 运行 Git Bash Here 输入 $ npm install
- 在react文件夹下，就可以看到node_modules文件夹
node_modules文件夹.png
接着在 Git 弹框下输入 $ npm start
运行.png
在你的浏览器访问 http://localhost:8989/ 就可以看到页面上出现的一个红色背景的demo了
注意：如果运行失败、看一下你的文件夹和文件名是否正确
