diff --git a/libs/horizon/jsx-runtime.ts b/libs/horizon/jsx-runtime.ts
new file mode 100644
index 00000000..40b7fd86
--- /dev/null
+++ b/libs/horizon/jsx-runtime.ts
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2020 Huawei Technologies Co.,Ltd.
+ *
+ * openGauss is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import {
+  TYPE_FRAGMENT as Fragment,
+} from './src/external/JSXElementType';
+import { jsx } from './src/external/JSXElement';
+
+export {
+  jsx,
+  Fragment
+};
diff --git a/libs/horizon/src/external/JSXElement.ts b/libs/horizon/src/external/JSXElement.ts
index ebb43d18..a4cf50b7 100644
--- a/libs/horizon/src/external/JSXElement.ts
+++ b/libs/horizon/src/external/JSXElement.ts
@@ -107,3 +107,12 @@ export function cloneElement(element, setting, ...children) {
 export function isValidElement(element) {
   return !!(element && element.vtype === TYPE_COMMON_ELEMENT);
 }
+
+// 兼容高版本的babel编译方式
+export function jsx(type, setting, key) {
+  if (setting.key === undefined && key !== undefined) {
+    setting.key = key;
+  }
+
+  return buildElement(false, type, setting, []);
+}
diff --git a/scripts/rollup/rollup.config.js b/scripts/rollup/rollup.config.js
index 05bd691e..57e17279 100644
--- a/scripts/rollup/rollup.config.js
+++ b/scripts/rollup/rollup.config.js
@@ -37,6 +37,18 @@ if (!fs.existsSync(outDir)) {
 }
 
 const outputResolve = (...p) => path.resolve(outDir, ...p);
+const BasicPlugins = [
+  nodeResolve({
+    extensions,
+    modulesOnly: true,
+  }),
+  babel({
+    exclude: 'node_modules/**',
+    configFile: path.join(__dirname, '../../babel.config.js'),
+    babelHelpers: 'runtime',
+    extensions,
+  })
+];
 
 function getOutputName(mode) {
   return mode === 'production' ? `horizon.${mode}.min.js` : `horizon.${mode}.js`;
@@ -61,16 +73,7 @@ function genConfig(mode) {
       },
     ],
     plugins: [
-      nodeResolve({
-        extensions,
-        modulesOnly: true,
-      }),
-      babel({
-        exclude: 'node_modules/**',
-        configFile: path.join(__dirname, '../../babel.config.js'),
-        babelHelpers: 'runtime',
-        extensions,
-      }),
+      ...BasicPlugins,
       replace({
         values: {
           'process.env.NODE_ENV': `"${mode}"`,
@@ -96,4 +99,16 @@ function genConfig(mode) {
   };
 }
 
-export default [genConfig('development'), genConfig('production')];
+function genJSXRuntimeConfig() {
+   return {
+     input: path.resolve(libDir, 'jsx-runtime.ts'),
+     output: [
+       {
+         file: outputResolve('jsx-runtime.js'),
+         format: 'cjs',
+       }
+     ],
+     plugins: BasicPlugins
+   };
+}
+export default [genConfig('development'), genConfig('production'), genJSXRuntimeConfig()];