Webpack+React+ES6 最新環境搭建和配置（2017年）

時間 2019-11-09

標籤 webpack+react+es6 webpack react 最新環境搭建配置 2017年欄目 React 简体版

原文原文鏈接

剛剛學習React，發現React在ES6下的語法纔是本體，結合ES6新的語言特性，使組件化開發顯得更加直觀。並且如今的Angular2也開始使用支持強類型的TypeScript，轉譯(transpiling)成了屢見不鮮。不學就分分鐘跟不上時代的腳步了……html

在搭建Webpack+React+ES6環境的過程當中，我參考過不少2016年的老帖，發現最後運行時都有各類各樣的報錯。版本更新迭代太快了，搭建時的配置也不可避免地有了細微的變化。在各類老帖的基礎上，我總結出2017年可用的搭建步驟以下：node

1.下載安裝最新版node.js（https://nodejs.org/en/）

（注意：爲了能支持es6，請下載4.0以上版本）

2（可選）.有了node和在node中集成的npm，爲了加快框架的下載速度，建議輸入如下命令切換至淘寶源：

npm config set registry http://registry.npm.taobao.org/

3.全局安裝Webpack, Babel, Webpack-dev-server：

npm install babel webpack webpack-dev-server -g

4.創建項目目錄，用npm init 初始化 npm 項目

mkdir react-hello-world
cd react-hello-world
npm init

注：執行npm init命令時會讓你輸入各類項目信息，通常直接回車就好，會自動填寫默認值。可是，要注意name不能跟咱們的模塊和項目文件目錄同名。react

初始化時也能夠使用如下命令：webpack

npm init -yes

這樣便不會再有詢問的環節，自動生成默認的package.json文件。可是也要手動修改name，不能跟咱們的模塊和項目文件目錄同名。es6

5.在項目中安裝 react, react-dom

npm install react react-dom --save

6.在項目中安裝 Babel 轉換器，須要用到插件 babel-preset-react, babel-preset-latest，latest 即最新的 ES 規範，包括了 Async/Await 這些新特性。

npm install babel-loader babel-core babel-preset-react babel-preset-latest --save

7.建立項目文件，main.js 即項目入口文件，App.js 即 React 組件主文件

touch index.html App.js main.js webpack.config.js

目錄結構以下所示：web

8.配置webpack，編輯webpack.config.js

module.exports = {
    entry: './main.js', // 入口文件路徑
    output: {
        path: '/',
        filename: 'index.js'
    },
    devServer: {
        inline: true,
        port: 3333
    },
    module: {
        loaders: [
            {
                test: /\.js$/, // babel 轉換爲兼容性的 js
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'latest']
                }
            }
        ]
    }
}

9.開始寫項目：

(1).index.html:npm

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>React Hello World</title>
</head>
<body>
<div id="app"></div>
<script src="index.js"></script>
</body>
</html>

(2).App.js:json

import React from 'react';

class App extends React.Component {

    render() {
        return <div>Hello World!</div>
    }
}

export default App

(3).main.js:babel

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

10.配置 npm scripts, 編輯 package.json，在"scripts"屬性處添加一行：

"scripts": {
   "start": "webpack-dev-server"
},

11.基本的框架搭建完畢，npm start 而後打開 http://localhost:3333 試試：

npm start

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。