react中启用jsx语法

如何启用 jsx 语法？

• 安装 babel 插件

  • 运行cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
  • 运行cnpm i babel-preset-env babel-preset-stage-0 -D

• 安装能够识别转换jsx语法的包 babel-preset-react

  • 运行cnpm i babel-preset-react -D

• 添加 .babelrc 配置文件

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

• 添加babel-loader配置项：

  module: { //要打包的第三方模块
      rules: [
        { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
      ]
  }
  

如何启用 jsx 语法？

• 安装 babel 插件

  • 运行npm i babel-loader @babel/core @babel/plugin-transform-runtime @babel/runtime -D
  • 运行npm i @babel/preset-env @babel/plugin-proposal-class-properties -D

• 安装能够识别转换jsx语法的包 @babel/preset-react

  • 运行npm i @babel/preset-react -D

• 添加 .babelrc 配置文件

  {
     "presets": ["@babel/preset-env", "@babel/preset-react"],
     "plugins": ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties"]
  

• 添加babel-loader配置项：

  module: { //要打包的第三方模块
      rules: [
        { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
      ]
  }