From 532376dbe0eab6550997a1d2d3f06e72b75c59c3 Mon Sep 17 00:00:00 2001 From: Evan You Date: Mon, 27 Aug 2018 10:37:59 -0400 Subject: [PATCH 1/3] v0.1.0 --- lerna.json | 4 +++- packages/babel-helper-vue-jsx-merge-props/package.json | 5 ++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/lerna.json b/lerna.json index 9aae9d2..929121f 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,8 @@ { "lerna": "2.9.1", - "packages": ["packages/*"], + "packages": [ + "packages/*" + ], "version": "0.1.0", "npmClient": "yarn" } diff --git a/packages/babel-helper-vue-jsx-merge-props/package.json b/packages/babel-helper-vue-jsx-merge-props/package.json index 2048cce..040cb2f 100644 --- a/packages/babel-helper-vue-jsx-merge-props/package.json +++ b/packages/babel-helper-vue-jsx-merge-props/package.json @@ -25,6 +25,9 @@ "rollup-plugin-istanbul": "^2.0.1" }, "nyc": { - "exclude": ["dist", "test"] + "exclude": [ + "dist", + "test" + ] } } From 5799dd1927b10163e73029dc14d85533cf47ab21 Mon Sep 17 00:00:00 2001 From: "DESKTOP-1G11NR0\\WS" <1197802519@qq.com> Date: Thu, 9 Jun 2022 11:22:54 +0800 Subject: [PATCH 2/3] feat: add-zh-CN doc --- README.zh-CN.md | 232 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 232 insertions(+) create mode 100644 README.zh-CN.md diff --git a/README.zh-CN.md b/README.zh-CN.md new file mode 100644 index 0000000..cc5188e --- /dev/null +++ b/README.zh-CN.md @@ -0,0 +1,232 @@ +# Babel Preset JSX + +添加babel预设, 让Vue支持JSX语法. 查看插件[配置项](./packages/babel-preset-jsx). + +## 兼容性 + +当前插件仅兼容如下版本: + +- **Babel 7+**. 对于babel 6, 请使用 [vuejs/babel-plugin-transform-vue-jsx](https://github.com/vuejs/babel-plugin-transform-vue-jsx) +- **Vue 2+**. JSX不支持低于vue2 以下版本. 对于Vue3, 有一个实验性插件可用 [@ant-design-vue/babel-plugin-jsx](https://github.com/vueComponent/jsx). + +## 安装 + +安装如下依赖: + +```bash +npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props +``` + +添加 preset 配置 `babel.config.js`: + +```js +module.exports = { + presets: ['@vue/babel-preset-jsx'], +} +``` + +## 语法 + +### Content + +```jsx +render() { + return

hello

+} +``` + +动态值: + +```jsx +render() { + return

hello { this.message }

+} +``` + +自闭合标签: + +```jsx +render() { + return +} +``` + +使用组件: +> 注意: JSX使用组件时, 不需要在components中注册 + +```jsx +import MyComponent from './my-component' + +export default { + render() { + return hello + }, +} +``` + +条件渲染 + +```jsx +export default { + render() { + let DOMList = [] + let a = 1 + + if(a === 1) { + let HeadCom = (
头部
) + DOMList.push(HeadCom) + } + + let ContentCom = (
内容主体
) + + DOMList.push(ContentCom) + + // 直接返回即可 + return ( +
+ {DOMList} +
+ ) + } +} +``` + +### Attributes/Props + +```jsx +render() { + return +} +``` + +动态绑定值: + +```jsx +render() { + return +} +``` + +使用展开符号 (使用对象需要兼容Vue对象数据结构 [Vue Data Object](https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth)): + +```jsx +render() { + const inputAttrs = { + type: 'email', + placeholder: 'Enter your email' + } + + return +} +``` + +### Slots + +具名插槽: + +```jsx +render() { + return ( + +
header
+
footer
+
+ ) +} +``` + +scoped slots: + +```jsx +render() { + const scopedSlots = { + header: () =>
header
, + footer: () => + } + + return +} +``` + +### 指令 + +```jsx + +``` + +修饰符: + +```jsx + +``` + +参数: + +```jsx + +``` + +指令带 **参数**和**修饰符**写法: + +```jsx + +``` + +v-html: + +```jsx +

+``` + +### 事件 + +```jsx + +``` + +### 函数式组件 + +如果是默认导出,则将箭头函数自动转换为函数式组件: + +```jsx +export default ({ props }) =>

hello {props.message}

+``` + +或使用PascalCase声明变量: + +```jsx +const HelloWorld = ({ props }) =>

hello {props.message}

+``` From 27054619c84a04d4d9529e697c36e222a76d7ec6 Mon Sep 17 00:00:00 2001 From: "DESKTOP-1G11NR0\\WS" <1197802519@qq.com> Date: Thu, 9 Jun 2022 12:22:36 +0800 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E4=B8=AD?= =?UTF-8?q?=E6=96=87/=E8=8B=B1=E6=96=87=E6=96=87=E6=A1=A3=E8=BF=9E?= =?UTF-8?q?=E6=8E=A5=E8=B7=B3=E8=BD=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 ++ README.zh-CN.md | 20 ++++++++++++++++++++ 2 files changed, 22 insertions(+) diff --git a/README.md b/README.md index 3c380b8..1089bd5 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # Babel Preset JSX +English | [简体中文](./README.zh-CN.md) + Configurable Babel preset to add Vue JSX support. See the [configuration options here](./packages/babel-preset-jsx). ## Installation diff --git a/README.zh-CN.md b/README.zh-CN.md index cc5188e..08f29d7 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -1,4 +1,5 @@ # Babel Preset JSX +[English](./README.md) | 简体中文 添加babel预设, 让Vue支持JSX语法. 查看插件[配置项](./packages/babel-preset-jsx). @@ -25,6 +26,25 @@ module.exports = { } ``` +**tips**: 如果出现 `Duplicate declaration "h" (This is an error on an internal node. Probably an internal error.)` + +请调整配置如下 +``````JS +module.exports = { + presets: [ + [ + '@vue/babel-preset-jsx', + // 不自动注入h + { + "injectH": false + } + ] + ], +} +``` + +``` + ## 语法 ### Content