• 1.安裝和配置 webpack

  2.Babel的安裝與配置

  Babel其實是一個編譯JavaScript的平臺，Webpack loaders(加載器) 將某些內容作為輸入并生成其他內容作為輸出。
  Babel其實是幾個模塊化的包，其核心功能位于稱為babel-core的npm包中，webpack可以把其不同的包整合在一起使用，對于每一個你需要的功能或拓展，你都需要安裝單獨的包（用得最多的是解析Es6的babel-preset-env包和解析JSX的babel-preset-react包）。

• babel-loader是webpack加載器，負責接收最新的JavaScript代碼（ES6，ES7…）代碼并使其可以被當前使用的瀏覽器完全支持。

• 安裝并配置babel-preset-env用于將JavaScript ES6代碼編譯為ES5
• 安裝并配置babel-preset-react用于將JSX和其他東西編譯到JavaScript

1.安裝依賴包

// npm一次性安裝多個依賴模塊，模塊之間用空格隔開 npm install --save-dev babel-loader babel-core babel-preset-env babel-preset-react

2.配置Babel，創建文件.babelrc

Babel其實可以完全在 webpack.config.js 中進行配置，但是考慮到babel具有非常多的配置選項，在單一的webpack.config.js文件中進行配置往往使得這個文件顯得太復雜，因此一些開發者支持把babel的配置選項放在一個單獨的名為 “.babelrc” 的配置文件中。
webpack會自動調用.babelrc里的babel配置選項。

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

3.配置webpack.config.js

module.exports = {module: {rules: [{test: /(\.jsx|\.js)$/,use: {loader: "babel-loader"},exclude: /node_modules/}]}} }

現在你的webpack的配置已經允許你使用ES6以及JSX的語法了

3.編寫 React 組件

安裝 React 和 React-DOM

npm install --save react react-dom

使用ES6語法創建react組件

//Greeter,js import React, {Component} from 'react' import config from './config.json';class Greeter extends Component{render() {return (<div>{config.greetText}</div>);} } export default Greeter

使用ES6的模塊定義和渲染Greeter模塊

// main.js import React from 'react'; import {render} from 'react-dom'; import Greeter from './Greeter';render(<Greeter />, document.getElementById('root'));

總結

以上是生活随笔為你收集整理的使用 webpack 4 和 Babel 构建 React 应用(2018)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。