JSX構文を有効にする（開発環境に反応ビルドに足場なし）プロジェクトに反応

XML標準jsの構文に準拠しています：構文JSXは何ですか。（厳格たくさんのために、HTML構文相対）

JSX文法を有効にする方法？

プラグインをインストールバベル：

実行します。

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

インストールは、構文変換JSXパッケージを識別することができます：

実行します。

cnpm i babel-preset-react -D

プロジェクトのルートディレクトリに.babelrc設定ファイルを追加します。

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

ファイルをwebpack.config.js、の設定項目のバベル・ローダーを追加します。

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

メイン文書：

package.json： （バベル-Loaderは7.xのバージョンである必要があります）

{
  "name": "wp4-1",
  "version": "1.0.0",
  "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --open chrome --port 3000 --hot --host 127.0.0.1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.7.0", "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "html-webpack-plugin": "^3.2.0", "webpack": "^4.41.5", "webpack-cli": "^3.3.10", "webpack-dev-server": "^3.10.1" }, "dependencies": { "react": "^16.12.0", "react-dom": "^16.12.0" } }

webpack.config.js：

const path = require("path")
const htmlWebpackPlugin = require("html-webpack-plugin") // 导入 在内存中自动生成html文件 的插件 // 创建一个插件的实例对象 const htmlPlugin = new htmlWebpackPlugin({ template: path.join(__dirname, "./src/index.html"), // 源文件 filename: "index.html" // 生成的 内存中首页的 名称 }) // 向外暴露一个打包的实例对象，因为webpack是基于Node构建的，所以webpack支持所有Node API和语法 // webpack 默认只能打包处理.js后缀名类型的文件，想.vue .png无法主动处理，所以要配置第三方的loader module.exports = { mode: 'development', // development 或 production plugins: [ htmlPlugin ], module: { // 所有第三方模块的配置规则 rules: [ // 第三方匹配规则 { test: /\.js|jsx$/, use: "babel-loader", exclude: /node_modules/ // exclude千万别忘记 } ] } }

.babelrc

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

index.js：

// 导入包
import React from 'react'
import ReactDOM from 'react-dom' // HTML是最优秀的标记语言； // 注意：在JS文件中，默认不能写类似于HTML的标记语言，否则打包会失败 // 可以使用babel来转换这些JS中的标记 // 这种在JS中混合写入类似于HTML的语法叫做JSX语法，符合XML规范的JS // JSX语法的本质还是在运行的时候，被babel转换成React.createElement形式来执行的 const myDiv = <div id="my-div" title="my div">这是一个div元素</div> ReactDOM.render(myDiv, document.getElementById("app"))

index.htmlを：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>首页</h1>
    <div id="app"></div>
</body>
</html>

JSX構文を有効にする（開発環境に反応ビルドに足場なし）プロジェクトに反応

JSX文法を有効にする方法？

メイン文書：

おすすめ