使用 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