2016-04-06

react-webpack-babel环境搭建

1、创建学习目录

mkdir learn
cd learn

2、npm初始化项目

npm init //根据相关提示完善信息，入口js文件：src/index.js

3、安装相关模块

安装相关react npm包，并且使用es2015（也就是es6支持，需要babel-preset-es2015包），因为我之前做个一些js相关项目，所以部分npm包已经全局安装，比如webpack等等，大家根据提示补足自己的npm包即可

npm install --global webpack
npm install --save react
npm install --save react-dom
npm install --save babel-loader
npm install --save babel-preset-es2015
npm install --save babel-preset-react

4、创建相关文件目录结构

mkdir src //存放源文件
mkdir build //存放编译后的js文件

5、创建webpack配置文件（webpack好强大，之后再做详细的学习）

touch webpack.config.js

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

6、创建index.js源文件，书写经典的Hello World！

touch src/index.js

var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);

7、利用webpack编译源文件

根目录下直接运行webpack，运行完成后会在build目录生成bundle.js文件

$ webpack

Hash: 32a8e736b4323f7ec350
Version: webpack 1.12.9
Time: 1318ms
  Asset    Size  Chunks             Chunk Names
bundle.js  676 kB       0  [emitted]  main
 [0] multi main 28 bytes {0} [built]
  + 159 hidden modules

8、创建index.html承载体文件，引入bundle.js，方便在浏览器中运行

touch build/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>React环境搭建</title>
</head>
<body>
  <div id="example"></div>
</body>
<script src="bundle.js"></script>
</html>