搭建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