1 引入

• jsx: javascript+xml
• react中樣式結構行為都是用js編寫的,由於在js中直接編寫html程式碼會報錯
• 出現了jsx,需要用babel來轉換
• babel會將js中的結構程式碼解析成html程式碼,然後渲染到頁面
• 說明:webpack引入依賴時,會因為版本問題出現很多的坑

2 babel下載與配置

• 基礎下載

cnpm i babel-core babel-loader babel-plugin-transform-runtime

• 語法下載

cnpm i babel-preset-env babel-preset-stage-0 babel-preset-react

配置檔案

• 建立.babelrc

{
    "plugins": ["transform-runtime"],
    "presets": ["env","stage-0","react"]
}

• 配置webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

const html = new HtmlWebpackPlugin({
    template: path.join( __dirname, './src/index.html' ),//原始檔路徑
    filename:'index.html'//在記憶體中的名字
})
module.exports = {
    mode: "development", // "production"-->為預設
    plugins:[
        html
    ],
    module:{
        rules:[
            {test:/.\js|jsx$/,use:'babel-loader',exclude:/node_modules/}
        ]
    }

}