组件化：2. 组件的基本知识 | 为组件添加JSX语法

搭建JSX环境

安装webpack webpack-cli

mdkir jsx #创建目录
cd jsx	#进入文件夹
npm init #初始化 （一直按enter即可）
npm install -g webpack webpack-cli  #全局安装webpack webpack-cli
webpack --version #查看版本

若用的是vs code终端，可能会有以下报错：

• webpack : 无法加载文件 D:\Program Files\nodejs\webpack.ps1……；
  

• set-ExecutionPolicy : 对注册表项“HKEY……”的访问被拒绝

可点击这里查看链接帮助解决：

安装完webpack之后，还需要安装Babel系列，因为JSX是Babel的一个插件,所以需要依次安装 webpack，babel-loader、babel 和babel的plugin

webpack可以帮助我们把不同的import或者requre这些东西打包

babel可以把一个新版本的JS编译成一个老版本的JS，这样可以在更多的老版本的浏览器去跑

npm install --save-dev webpack babel-loader #本地目录安装
code . #vs code 终端打开当前项目

配置webpack.config.js

module.exports = {
    entry:"./main.js"
}

配置main.js文件

for(let i of [1,2,3]){
    console.log(i);
}

运行–> 点creat…… -->命令终端

webpack  #打包

安装@babel/core @babel/preset-env

npm install --save-dev @babel/core @babel/preset-env 
#只安装babel/core啥也不会做，还需要安装babel的preset-env

配置webpack.config.js

module.exports = {
    entry:"./main.js",
    //模块
    module:{
        rules:{
            test:/\.js$/,
            use:{
                loader:"babel-loader",
                options:{
                    presets:['@babel/preset-env']
                }
            }
        }
    }
}

配置好之后运行webpack

若有以下问题：

点击这里查看链接解决

安装@babel/plugin-transform-react-jsx

没问题后可在webpack.config.js中增加

mode:"development" //表示是开发者模式，打包后的文件不在压缩，可调式

在main.js中增加：

let a = <div/>//没有在package.json配置时会报错

需在package.json中增加 @babel/plugin-transform-react-jsx,即在终端安装：

npm install --save-dev @babel/plugin-transform-react-jsx

安装完之后需要配置

plugins:["@babel/plugin-transform-react-jsx"]

此时再去运行webpack