feat: use babelrc & broswerslistrc

Author: jerrywu

.babelrc

@@ -0,0 +1,23 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "usage",
+        "modules": false, // preserve ES modules.
+        "corejs": { "version": 3, "proposals": true }
+      }
+    ],
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    "@babel/plugin-transform-runtime",
+    [
+      "@vue/babel-plugin-jsx",
+      {
+        "enableObjectSlots": true
+      }
+    ]
+  ],
+  "exclude": ["core-js"]
+}

.browserslistrc

@@ -1 +1 @@
->1%
+>0.2%

babel.config.js

@@ -72,22 +72,27 @@
     "test:ui": "vitest --ui",
     "typecheck": "tsc && vue-tsc"
   },
+  "dependencies": {
+    "@babel/runtime": "^7.21.0",
+    "core-js": "^3.30.1"
+  },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.21.4",
     "@babel/plugin-transform-typescript": "^7.21.3",
     "@babel/preset-env": "^7.21.4",
     "@babel/preset-typescript": "^7.21.4",
     "@commitlint/cli": "^17.6.1",
     "@commitlint/config-conventional": "^17.6.1",
-    "@swc/core": "^1.3.53",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@swc/core": "^1.3.54",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/user-event": "^14.4.3",
     "@testing-library/vue": "^7.0.0",
     "@types/lodash.isequal": "^4.5.6",
     "@types/lz-string": "^1.3.34",
     "@types/node": "^18.16.0",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.59.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.1",
+    "@typescript-eslint/parser": "^5.59.1",
     "@vitejs/plugin-vue": "^4.1.0",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "@vitest/ui": "^0.30.1",
@@ -96,7 +101,6 @@
     "babel-loader": "^9.1.2",
     "browserslist-to-esbuild": "^1.2.0",
     "bumpp": "^9.1.0",
-    "core-js": "^3.30.1",
     "cssnano": "^6.0.0",
     "esbuild-plugin-babel": "^0.2.3",
     "eslint": "^8.39.0",
@@ -111,8 +115,8 @@
     "npm": "^9.6.5",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.23",
-    "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-cli": "^10.1.0",
+    "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-nested": "^6.0.1",
     "postcss-preset-env": "^8.3.2",
     "postcss-scss": "^4.0.6",

package.json

@@ -4,6 +4,8 @@ export interface Props {
   count?: number;
 }
 
+const test = null;
+
 /**
  * JsxDemo.
  */
@@ -18,8 +20,17 @@ export const JsxDemo = defineComponent({
     },
   },
   setup(props: Props) {
+    const b = '5'.padStart(2, '1');
+    const c = test ?? 'hello';
+    const d = {} as Record<string, any>;
+
     return () => (
-      <div class="test">count in jsx component: {props.count}</div>
+      <div class="test">
+        <p>count in jsx component: {props.count}</p>
+        <p>{b}</p>
+        <p>{c}</p>
+        <p>{d}</p>
+      </div>
     );
   },
 }) as DefineComponent<Props>;

src/components/jsx-demo/index.tsx

@@ -25,7 +25,7 @@ export default defineConfig({
   dts: './src/index.ts',
   // sourcemap: true,
   splitting: false,
-  minify: true,
+  // minify: true,
   esbuildPlugins: [
     babel(),
   ],

tsup.config.ts

@@ -7,6 +7,7 @@ import Vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import { defineConfig } from 'vite';
 import browserslistToEsbuild from 'browserslist-to-esbuild';
+import { getBabelOutputPlugin } from '@rollup/plugin-babel';
 import pkg from './package.json';
 
 const resolvePath = (pathName: string) => path.resolve(__dirname, pathName);
@@ -31,6 +32,13 @@ export default defineConfig({
     target: browserslistToEsbuild(),
     sourcemap: false,
     rollupOptions: {
+      plugins: [
+        // https://www.npmjs.com/package/@rollup/plugin-babel
+        getBabelOutputPlugin({
+          configFile: path.resolve(__dirname, '.babelrc'),
+          filename: '.babelrc',
+        }),
+      ],
       output: {
         exports: 'named',
       },