react 开发环境搭建

目录：

babel + browserify
jspm
文件引入方式

babel + browserify

npm install babel-cli babel-preset-2015babel-preset-react --save-dev
npm install browserify --save-dev
// .babelrc 通过cli创建 touch .babelrc
{
  "presets": ["es2015","react"]
}
// main.js
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
    
h1
,
    document.querySelector('#root')
)

// 打包
babel main.js -o main_es5.js
browserify main_es5.js -o bundle.js
// 最后

jspm

需开启一个本地服务器

npm install gulp -g
npm install gulp gulp-connect --save-dev

// Gulpfile.js
let gulp = require('gulp'),
    connect = require('gulp-connect');

gulp.task('connect',()=>{
    connect.server({
        livereload: true
    })
})
gulp.task('default',['connect'])

$_> gulp

// 安装jspm
npm install -g jspm
// 初始化
jspm init -y
// 安装模块
jspm install react
jspm install npm:react-dom

// index.html



    
    


    
 

 









// app/main.js
import React from 'react';
import ReactDom from 'react-dom' ;
ReactDom.render(
  
hello jspm
,
document.getElementById('app')
) ;

文件引入方式