refactor(play): 让play可以在ESM下编译 (#39)

ecomfe · Jan 20, 2022 · 03baf9e · 03baf9e
1 parent 88c190b
commit 03baf9e
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 5 deletions.
diff --git a/packages/cli-play/src/webpack.ts b/packages/cli-play/src/webpack.ts
@@ -49,6 +49,15 @@ export const createWebpackConfig = async (target: string, cmd: PlayCommandLineAr
                 ...(baseConfig.module?.rules ?? []),
             ],
         },
+        resolve: {
+            ...baseConfig.resolve,
+            fallback: {
+                ...baseConfig.resolve?.fallback,
+                // React要从`17.0.3`开始才会有`exports`配置，这之前的版本在ESM下是必须加`.js`后续的。
+                // 利用这个`resolve.fallback`，可以在找不到`react/jsx-runtime`时跳到`react/jsx-runtime.js`上去，兼容旧版本。
+                'react/jsx-runtime': 'react/jsx-runtime.js',
+            },
+        },
     };
     return config;
 };
diff --git a/packages/cli-play/tsconfig.build.json b/packages/cli-play/tsconfig.build.json
@@ -3,8 +3,6 @@
     "compilerOptions": {
         "rootDir": "src",
         "outDir": "dist",
-        // TODO: 这里要改回`react-jsx`
-        "jsx": "preserve"
     },
     "include": ["src"],
     "exclude": ["**/__tests__"]

diff --git a/packages/cli-play/tsconfig.json b/packages/cli-play/tsconfig.json
@@ -1,7 +1,10 @@
 {
     "extends": "../../tsconfig.base.json",
     "compilerOptions": {
-        "jsx": "preserve"
+        "jsx": "react-jsx",
+        "paths": {
+            "react/jsx-runtime": ["node_modules/@types/react/jsx-runtime.d.ts"]
+        }
     },
     "exclude": ["dist"]
 }
diff --git a/packages/config-babel/src/index.ts b/packages/config-babel/src/index.ts
@@ -10,8 +10,6 @@ import getParseOnlyBabelConfigFilled from './parseOnly.js';
 import getTransformBabelConfigFilled from './transform.js';
 import {BabelConfigOptions, BabelConfigOptionsFilled} from './interface.js';
 
-// TODO: 看看能不能为jest和eslint定制一个完全不依赖自己的babel plugin的配置出来
-
 export type {BabelConfigOptions};
 
 export const getParseOnlyBabelConfig = (options?: BabelConfigOptions): TransformOptions => {