React环境配置与调试技巧

1.初始化

在目录中用命令提示行输入：

npm init

在package.json中查看已经安装的包

2.项目依赖包安装

文档查阅：[https://facebook.github.io/react/docs/package-management.html]

安装react和babel

npm install --save react react-dom babelify babel-preset-react

如果需要用到es2015，则还需要安装

npm install babel-preset-es2015 --save

3.webpack热加载配置

模板：webpack.config.js

var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: __dirname + "/src",
  entry: "./js/index.js",
  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015'],
        }
      }]
  },
  output: {
    path: __dirname + "/src/",
    filename: "bundle.js"
  }
};

包的安装

全局安装
sudo npm install -g webpack
sudo npm install -g webpack-dev-server
sudo npm install -g webpack-cli
项目安装
sudo npm install webpack --save
sudo npm install webpack-dev-server --save
sudo npm install webpack-cli --save

debug方法：

webpack --display-error-details

实时更新：

webpack --watch
webpack-dev-server       #自动刷新,手动复制路径
webpack-dev-server --contentbase -src --inline --hot

4.Atom插件配置

atom-ternjs

atom-beauty

open-in-browser

file-icons

highlight-selected

highlight-line