使用 Babel + React + Webpack 搭建 Web 应用

话不说直接上正题。

环境搭建

1. Babel--目前浏览器对于ES6的语法解析支持度还不高，因此要经过转码在编译，因此在使用ES6以前要安装Babel，以前安装的时候遇到了一些问题可是没有所有记录下来，如今只能是尽力重现一下。

　　Babel6版本开始已经不支持使用npm install babel -g 安装了，它分红了几个部分

• babel cli,适用于命令行
• babel-core，包含node api

npm install babel-cli -g
npm install babel-core --save-dev

　　babel须要手动安装插件

npm install babel-preset-es2015

　　

而后在命令行输入vim .babelrc在文件夹下面建立一个叫.babelrc的文件，并写入以下代码：

{
	"presets": ["es2015"]
}

而后保存退出。

2.配置webpack

能够参考

 http://www.cnblogs.com/vajoy/p/4650467.html

首先记录下webpack的使用

一、新建一个文件夹存放咱们的项目

npm init 建立package.json的配置文件

二、把webpack保存到本地依赖里面

npm install webpack --save-dev

三、单个文件打包

新建js文件entry.js里面写上js代码，而后使用

webpack entry.js  bundle.js

便可在本地目录生成一个打包好的bundle.js，而后把bundle.js引入到页面中

四、webpack默认打包js文件，若是咱们须要打包css文件须要加载相应的loader

例如：css须要加载的loader有css-loader和style-loader

npm install css-loader style-loader  --save-dev

而后在入口文件entry.js中加入

require('style!css! ./style.css');  //把css当作模块加载进来

五、文件太多时候这样写就过于繁琐了，咱们可使用webpack.config.js文件定义webpack的配置，

module.exports ={
  entry:'./entry.js', //定义的入口文件
  output:{
    path: __dirname,  //打包好的文件的路径
    filename: 'bundle.js' //打包好的文件名
  },
  devtool:'source-map',  //生成source-map 能够在浏览器经过sourcemap看到咱们写的打包以前的文件，便于调试  （能够在打包以前的文件须要调试的地方加入 debugger；做用相似于断点）
  module:{  //当打包的文件中使用了loader时候咱们须要这样写
    loaders:[
      {test:/\.js$/, exclude:/node_modules /, loader: 'react-hot!babel'},   //exclude 指的是排除那些文件不打包
      {test:/\.css$/, loader:'style!css'}

    ]
  }
}

六、在webpack中使用babel

首先得在本地安装babel须要的依赖

npm install babel-loader babel-core babel-preset-es2015 --save-dev

　　而后在项目根目录下增长.babelrc文件里面输入

{
  presets:["es2015"]  
}

　　总和使用webpack+babel+react

首先在项目本地安装依赖

npm install babel-core babel-preset-es2015 babel-preset-react webpack webpack-dev-server babel-loader react-hot-loader --save-dev

　　而后安装react的

npm install react react-dom --save

　　而后在项目中配置.babelrc

{
  "presets":["es2015","react"]
}

　　新建一个name.js

" use strict";
import React from "react";

class Name extends React.Component{
  render(){
    return(
      <div>
        hello~~ yang <input />
      </div>
    );
  }
}
export {Name as default};

　　而后在entry.js入口文件中配置

"use strict";

import React from "react";
import ReactDOM from "react-dom";

import Name from './name';


ReactDOM.render(
  <Name />,
  document.getElementById('app')
);

　　webpack.config.js配置

module.exports ={
  entry:'./entry.js',
  output:{
    path: __dirname,
    filename: 'bundle.js'
  },
  devtool:'source-map',
  module:{
    loaders:[
      {test:/\.js$/, exclude:/node_modules /, loader: 'react-hot!babel'},
      {test:/\.css$/, loader:'style!css'}

    ]
  }
}

　　而后在package.json中加一句话在

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack-dev-server --inline --hot"
  },

　　而后在控制台运行  

npm run watch

　　就能在浏览器中访问  http://localhost:8080