详解如何使用webpack在vue项目中写jsx语法
本文介绍了如何使用webpack在vue项目中写jsx语法，分享给大家，具体如下:
我们知道Vue 2.0中对虚拟DOM的支持。我们可以通过JavaScript动态的创建元素，而不用在template中写HTML代码。虚拟DOM最终将被渲染为真正的DOM。
data: {
msg: 'Hello world'
},
render (h) {
return h(
'div',
{ attrs: { id: 'my-id' },
[ this.msg ]
);
}
渲染后的内容为：
<div id='my-id'>Hello world</div>
Vue 2.0中的render为我们开启了一片新的天地，赋予了我们无限的想象力。比如，我们可以把React中用到的JSX语法应用到Vue中来。接下来，我们就聊聊怎么在Vue项目中使用JSX.
JSX简介
JSX是基于Javascript的语言扩展， 它允许在Javascript代码中插入XML语法风格的代码。如下所示：
data: {
msg: 'Hello world'
},
render (h) {
return (
<div id='my-id'>,
{ this.msg }
</div>
);
}
但值得注意的是，浏览器默认是解析不了JSX的，它必须要先编译成标准的JavaScript代码才可以运行。就像我们需要将sass或者less编译为CSS代码之后才能运行一样。
在Vue中使用JSX
Vue框架并没有特意地去支持JSX，其实它也没必要去支持，因为JSX最后都会编译为标准的JavaScript代码。既然这样， 那Vue和JSX为什么能配合在一起使用呢？ 很简单， 因为Vue支持虚拟DOM， 你可以用JSX或者其他预处理语言，只要能保证render方法正常工作即可。
Vue官方提供了一个叫做babel-plugin-transform-vue-jsx的插件来编译JSX， 我们稍后介绍如何使用它。
为什么要在Vue中使用JSX
为什么要再Vue中使用JSX ? 其实Vue并没有强迫你去使用JSX， 它只是提供了一种新的方式而已。正所谓萝卜青菜，各有所爱。有的人觉得在render方法中使用JSX更简洁，有的人却觉得在JavaScript代码中混入HTML代码很恶心。反正你喜欢就用，不喜欢就不用呗。废话少说，我们先看一个简单的应用：
script.js
new Vue({
el: '#app',
data: {
msg: 'Click to see the message'
},
methods: {
hello () {
alert('This is the message')
}
}
});
index.html
<div id="app">
<span
class="my-class"
style="cursor: pointer"
v-on:click="hello"
>
{{ msg }}
</span>
</div>
代码很简单，就是在页面上显示一个span, 里面的内容为"Click to see the message"。当点击内容时，弹出一个alert。我们看看用render怎么实现。
用Vue 2.0中的render函数实现
script.js
new Vue({
el: '#app',
data: {
msg: 'Click to see the message'
},
methods: {
hello () {
alert('This is the message')
}
},
render (createElement) {
return createElement(
'span',
{
class: { 'my-class': true },
style: { cursor: 'pointer' },
on: {
click: this.hello
}
},
[ this.msg ]
);
},
});
index.html
<div id="app"><!--span will render here--></div>
使用JSX来实现
script.js
new Vue({
el: '#app',
data: {
msg: 'Click to see the message.'
},
methods: {
hello () {
alert('This is the message.')
}
},
render: function render(h) {
return (
<span
class={{ 'my-class': true }}
style={{ cursor: 'pointer' }}
on-click={ this.hello }
>
{ this.msg }
</span>
)
}
});
index.html和上文一样。
babel-plugin-transform-vue-jsx
正如前文所说， JSX是需要编译为JavaScript才可以运行的， 所以第三个样例需要有额外的编译步骤。这里我们用Babel和Webpack来进行编译。
打开你的webpack.config.js文件， 加入babel loader:
loaders: [
{ test: /\.js$/, loader: 'babel', exclude: /node_modules/ }
]
新建或者修改你的.babelrc文件，加入 babel-plugin-transform-vue-jsx 这个插件
{
"presets": ["es2015"],
"plugins": ["transform-vue-jsx"]
}
现在运行webpack, 代码里面的JSX就会被正确的编译为标准的JavaScript代码。
绛旓細鎴戜滑鍙互閫氳繃JavaScript鍔ㄦ佺殑鍒涘缓鍏冪礌锛岃屼笉鐢ㄥ湪template涓啓HTML浠ｇ爜銆傝櫄鎷烡OM鏈缁堝皢琚覆鏌撲负鐪熸鐨凞OM銆俤ata: { msg: 'Hello world'},render (h) { return h( 'div', { attrs: { id: 'my-id' }, [ this.msg ] );}娓叉煋鍚庣殑鍐呭涓猴細Hello worldVue 2.0涓殑render涓烘垜浠紑鍚簡涓鐗囨柊...
绛旓細棣栧厛 绠＄悊鍛樻ā寮忎笅鎵撳紑 鈥淒eveloper Command Prompt for VS2015", 鏄鐞嗗憳妯″紡鍟婏紒鐒跺悗杩涘叆 cd c:\Program Files (x86)\Microsoft Visual Studio 14.0\Web\External 鎵ц锛歯pm install webpack銆 缁濆涓嶈兘甯 -g銆傦紙鍋囪宸茬粡瀹夎浜哊odejs 鍙﹀鐨勭増鏈傦級鐒跺悗鎸夌収鍏朵粬鏂囩珷銆傚啓涓獁ebpack.config.js涔嬬被...
绛旓細鍦ㄦ祻瑙堝櫒鐨勮皟璇曟ā寮忎腑浼氱湅鍒癲iv鏍囩涓嚭鐜板睘鎬ata-v-xxx 锛岄偅鏄洜涓浣跨敤浜嗭紝鏍峰紡鍙綔鐢ㄦ湰缁勪欢涓紱濡傛灉鍘绘帀scoped锛宒iv鏍囩灏辨病鏈塪ata-v-灞炴э紝鍙槸鍗曠函鐨勬櫘閫氭爣绛炬枃鏈暟鎹 鐒跺悗鎶婅繖涓や釜缁勪欢瀵煎叆app.vue鏍圭粍浠朵腑 閰嶇疆鍚庨渶瑕佸湪webpack.config.js鏂囦欢涓厤缃畉est/loader 鏂板缓涓涓猧mage鏂囦欢澶规斁鍥剧墖 鍦╝pp...
绛旓細铏界劧宸茬粡2019骞翠簡涓嶈繃鏈変竴浜涢」鐩繕鏄渶瑕佺敤鍒癹query鐨勪笉杩囪冭檻鍒颁娇鐢╦query鐨勪竴鍫嗗吋瀹规ч棶棰樹篃涓轰簡鍙互椤哄埄鍦颁娇鐢‥S6鏉ユ捀浠ｇ爜鐮旂┒浣跨敤webpack+babel鎵撳寘浠ｇ爜鏉ュ彂甯冨嚑涓噸鐐癸細1.涓轰簡灏嗘ā鍧楀垎鍓插姞杞斤紝涓嶈嚦浜庝竴涓猨s鏂囦欢杩囧ぇ锛屼竴涓〉闈腑浣跨敤澶氫釜js鏂囦欢2.鐢变簬鏄椤甸」鐩紙澶氫釜html锛夛紝姣忎釜椤甸潰浣跨敤鐨刯s鏂囦欢閮戒笉...
绛旓細涓夈佸垵鎺 webpack 3.1 浣跨敤babel鎵撳寘es6 3.1.1 缂栬瘧 ES 6/7 Babel Babel Presets Babel Polyfill Babel Runtime Transform 渚嬪瓙 3.2 鎵撳寘 Typescript 閰嶇疆 tsconfig Typings 渚嬪瓙 3.3 鎻愬彇 js 鐨勫叕鐢ㄤ唬鐮 渚嬪瓙 image.png 3.4 浠ｇ爜鍒嗗壊鍜屾噿鍔犺浇 绗竴绉嶆柟寮忥細閫氳繃wepack鍐呯疆鏂规硶 绗簩绉嶆柟寮忥細...
绛旓細杩涘叆椤圭洰锛浣跨敤webpack -v鏌ョ湅涓涓嬬増鏈紝鏋滅劧锛岀粨鏋滄槸鍏ㄥ眬鐨勭増鏈傝繖鏃惰鎯充娇鐢ㄥ眬閮ㄧ殑鐗堟湰锛岄偅涔堝氨浣跨敤npm鐨刾ackage.json鏉ュ疄鐜板惂銆傚畨瑁呭垵濮嬪寲鏃剁粰鐨勬渚嬶紝鎴戜滑鎵嬪姩鍐欎竴涓猻cript锛氣渨ebpackrun鈥濓細鈥渨ebpack -v鈥濇敞鎰忥紝杩欓噷鐨勫懡浠や笉姝㈡槸鏌ョ湅鐗堟湰鍙疯繖涔堢畝鍗曪紝濡傛灉浣犵殑椤圭洰鍦ㄤ娇鐢ㄨ繖涓懡浠や箣鍓嶆病鏈夊垱寤簑eb...
绛旓細1.澧炲姞鐜鍙橀噺 NODE_PATH 锛屽间负webpack鐨勫畨瑁呯洰褰曪紝濡 D:\nvm\v14.16.1\node_modules\gulp\bin\gulp.js 2.鐜鍙橀噺 Path 澧炲姞涓鏉℃暟鎹紝鍊间负webpack鐨勫畨瑁呯洰褰曪紝濡 D:\nvm\v14.16.1\node_modules\gulp\bin\gulp.js 3.鎵ц webpack -v 鍗冲彲鐪嬪埌鐗堟湰鎯呭喌 ...
绛旓細閲嶆柊瀹夎webpack 瀹夎鍏ㄥ眬鐨 浣跨敤 杩欎釜鍛戒护 npm i webpack -g
绛旓細1銆侀鍏堟寜涓嬪揩鎹烽敭crtl锛婻閿墦寮windows鐨勮繍琛屽璇濇锛2銆佺劧鍚庢帴鐫鍦ㄨ繍琛屼腑杈撳叆cmd鍛戒护锛屼箣鍚庣偣鍑荤‘瀹氭墦寮鍛戒护鎻愮ず绗︼細3銆佹渶鍚庡湪鍛戒护鎻愮ず绗︿腑杈撳叆鈥webpack -v鈥濓紝鍗冲彲鎵撳嵃鍑虹郴缁熷綋鍓嶅畨瑁呯殑webpack鐗堟湰銆備互涓婂氨鏄煡鐪嬪畨瑁厀ebpack鐨勭増鏈彿鐨勬柟娉曪細
绛旓細鎬荤粨鏉ヤ富瑕佹湁浠ヤ笅鍑犵鏂瑰紡锛 1銆佸敖鍙兘鐨勭缉灏webpack鎴栬呭叾浠栨墦鍖呭伐鍏风敓鎴愮殑鍖呯殑澶у皬 2銆浣跨敤鏈嶅姟绔覆鏌撶殑鏂瑰紡 3銆佷娇鐢ㄩ娓叉煋鐨勬柟寮 4銆佷娇鐢╣zip鍑忓皬缃戠粶浼犺緭鐨勬祦閲忓ぇ灏 5銆佹寜鐓ч〉闈㈡垨鑰呯粍浠跺垎鍧楁噿鍔犺浇浜屻佷紶缁熼〉闈㈠紑鍙戝湪React銆乂ue杩欑鏁版嵁椹卞姩鐨勬鏋惰繕娌＄洓琛岀殑鏃跺欙紝...
