入门篇（三）

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

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 (
          
demo
        );
    }
}

ReactDOM.render(, document.getElementById('root'));

1. src 同层目录下 右击 运行 Git Bash Here 输入 $ npm install

2. 在react文件夹下，就可以看到node_modules文件夹

node_modules文件夹.png

接着在 Git 弹框下输入 $ npm start

运行.png

在你的浏览器访问 http://localhost:8989/ 就可以看到页面上出现的一个红色背景的demo了

注意：如果运行失败、看一下你的文件夹和文件名是否正确

原文地址：http://www.cnblogs.com/sakurayeah/p/5944540.html