Reactjsx的编译原理分析

　　白癜风诚信单位 http://m.39.net/baidianfeng/a_6169831.html
前言

使用react的朋友对jsx的语法相当熟悉，JavaScript和html混合开发，灵活快速，DOM结构一目了然，经过babel处理在渲染到页面上，下面我们来看一下react如何处理jsx文件

下面看个demo，观察jsx的处理逻辑

先安装插件

yarnaddwebpackwebpack-cliyarnaddbabel-loaderyarnadd

babel/plugin-transform-react-jsxyarnadd

babel/preset-react

babel/preset-env简单配置一个webpack.config.js解析jsx

varpath=require("path");module.exports={mode:"development",entry:"./demo1.jsx",devtool:"source-map",output:{path:path.resolve(__dirname,"dist")},module:{rules:[{test:/\.jsx/,use:{loader:"babel-loader",options:{presets:["

babel/preset-env"],plugins:["

babel/plugin-transform-react-jsx"]}}}]}};再来一段demo1.jsx

constname="world";h1title=titleref=titlehello,{name}/h1;我们来看一下webpack打包之后的文件内容

/***/(function(module,exports){varname="world";/*#__PURE__*/React.createElement("h1",{title:"title",ref:"title"},"hello,",name);/***/})

可以看到babel解析成了React.createElement,

转载请注明：http://www.lwblm.com/bytj/12489.html