React+webpack開發環境的搭建

首先建立項目,確保該項目已經安裝了webpack和webpack-dev-server具體安裝方法請參考上章所述.

在上一章說過babel是一個javascript編輯器,在react項目中使用babel有如下兩個目的:

1:讓代碼支持ES6語法

2:支持react的一些特性(例如JSX語法)

針對以上兩個特性,有以下兩個presets能夠完美解決

babel-preset-es2015
babel-preset-react

以前咱們說過webpack中的loader是用於文件特定格式的轉換,那麼在這裏咱們就須要安裝Babel loader

//安裝babel-core核心模塊和babel-loader
npm install babel-core babel-loader --save-dev
//安裝ES6和React支持
npm install babel-preset-es2015 babel-preset-react --save-dev

babel安裝完成後,接下來要作的固然是配置該插件了,讓咱們新建一個.babelrc的配置文件

{
    "presets":["es2015","react"],
    "plugins":["transform-object-rest-spread"]
}

固然這些固然還不夠,在寫大型項目的時候一個統一的代碼規範是必須的,這樣有助於提升開發效率,在這裏給你們推薦一下ESLint,他的強大之處和babel有點類似,提供一個徹底可配置的檢查規則,並且提供了很是多的第三方plugin,適合不一樣的開發場所,還能輸出詳細的錯誤信息,固然最6的一點是它支持ES6最新語法的同時還支持JSX語法,因此說他爲React的絕配也不爲過.

1、安裝ESLint loader

一樣爲webpack添加這個loader 固然更準確的說是preloader 爲何這麼說呢 代碼規範檢查確定是要在代碼編譯以前來執行的,接下來就來安裝這個loader,同時eslint也提供了完整的代碼檢查規則plugin咱們就一同安裝下

npm install eslint eslint-loader --save-dev
npm install eslint-plugin-import esling-plugin-react eslint-plugin-jsx-a11y --save-dev
npm install eslint-config-airbnb --save-dev

接下來咱們來配置.eslintrc

{
    "extends":"airbnb",//繼承插件的檢查規則
    "rules": {
        "comma-dangle": ["error","never"] //修改默認規則,數組最後一項不加逗號 例如([1,2,3,4,]修改成[1,2,3,4])
    }
}

babel和eslint配置安裝完成後,接下來咱們要作的是如何把他們結合在一塊兒,首先咱們新建一個webpack.config.js文件,個人配置信息以下:

var path = require('path');
var htmlWebpackPugins = require('html-webpack-plugin');
var extracttext = require('extract-text-webpack-plugin');

//定義經常使用路徑
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH,'app');
var BULID_PATH = path.resolve(ROOT_PATH,'build');
module.exports = {
    entry:{
        app:path.resolve(ROOT_PATH,'index.jsx')
    },
    output:{
        path:BULID_PATH,
        filename:'bundle_[hash].js'
    },
    devtool:eval-source-map, //開啓熱更新
    devServer:{
        historyApiFallback:true,
        hot:true,
        inline:true,
        progress:true
    },
    module:{
        rules:[{
            test:/\.css$/,
            use: extracttext.extract({
              fallback: "style-loader",
              use: "css-loader"
            }),
            test:/\.jsx?$/,
            use:'babel-loader'
        }],
    },
    resolve:{
        ['.js','.jsx'] //添加拓展名
    },
    plugins:[
        new htmlWebpackPugins({
            title:'myfirstreact',
            minify:false
            // templateContent:function(){
            //     var html = "<div></div>";
            //     return html;
            // }
        }),
        new extracttext('styles.css')
    ]
}

配置文件寫好之後開始書寫項目的入口文件app.jsx,固然再次以前咱們須要引入react庫添加進去:

npm install react-dom --save //由於生產環境須要 因此用--save

最後便開始書寫咱們的app.jsx:

import React from 'react';
import ReactDOM from 'react-dom';
function App(){
    return (
        <div>
            <h1>helslgggos react</h1>
        </div>
    )
}
const app = document.createElement('div');
document.body.appendChild(app);

 

至此咱們的react基礎環境就搭建成功了,執行命令npm run dev 能夠看到酷炫的熱加載效果  so cool ok今天的分享就到這裏了