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 new file mode 100644 index 0000000..08f29d7 --- /dev/null +++ b/README.zh-CN.md @@ -0,0 +1,252 @@ +# Babel Preset JSX +[English](./README.md) | 简体中文 + +添加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'], +} +``` + +**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 + +```jsx +render() { + return
hello
+} +``` + +动态值: + +```jsx +render() { + returnhello { this.message }
+} +``` + +自闭合标签: + +```jsx +render() { + return +} +``` + +使用组件: +> 注意: JSX使用组件时, 不需要在components中注册 + +```jsx +import MyComponent from './my-component' + +export default { + render() { + returnhello {props.message}
+``` + +或使用PascalCase声明变量: + +```jsx +const HelloWorld = ({ props }) =>hello {props.message}
+```