feat: bundler-webpack output support esm (umijs#172)

siyi98 · web-flow · commit 1e54ca522b06 · 2021-11-10T23:08:37.000+08:00
* add esm config

* change script type when Enable esm

* feat:support output esm-file

* update pnpm-lock.yaml
diff --git a/examples/boilerplate/.umirc.ts b/examples/boilerplate/.umirc.ts
@@ -14,4 +14,5 @@ export default {
   headScripts: [`console.log('head script')`],
   scripts: [`console.log('script')`],
   npmClient: 'pnpm',
+  esm: {},
 };
diff --git a/examples/bundler-webpack-esm-demo/config.ts b/examples/bundler-webpack-esm-demo/config.ts
@@ -0,0 +1,7 @@
+export default {
+  // externals: {
+  //   react: 'React',
+  //   'react-dom': 'ReactDOM',
+  // },
+  esm: {},
+};
diff --git a/examples/bundler-webpack-esm-demo/index.html b/examples/bundler-webpack-esm-demo/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+    />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Document</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="https://gw.alipayobjects.com/os/lib/react/18.0.0-alpha-fd5e01c2e-20210913/umd/react.production.min.js"></script>
+    <script src="https://gw.alipayobjects.com/os/lib/react-dom/18.0.0-alpha-fd5e01c2e-20210913/umd/react-dom.production.min.js"></script>
+    <script type="module" src="./dist/index.js"></script>
+  </body>
+</html>
diff --git a/examples/bundler-webpack-esm-demo/index.tsx b/examples/bundler-webpack-esm-demo/index.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+function App() {
+  return <div>ESM App</div>;
+}
+
+// @ts-ignore
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<App />);
diff --git a/examples/bundler-webpack-esm-demo/package.json b/examples/bundler-webpack-esm-demo/package.json
@@ -0,0 +1,12 @@
+{
+  "scripts": {
+    "dev": "bundler-webpack dev",
+    "build": "bundler-webpack build"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.33",
+    "@types/react-dom": "^17.0.10",
+    "react": "^18.0.0-alpha-fd5e01c2e-20210913",
+    "react-dom": "^18.0.0-alpha-fd5e01c2e-20210913"
+  }
+}
diff --git a/packages/bundler-webpack/src/config/config.ts b/packages/bundler-webpack/src/config/config.ts
@@ -127,6 +127,7 @@ export async function getConfig(opts: IOpts): Promise<Configuration> {
   // experiments
   config.experiments({
     topLevelAwait: true,
+    outputModule: !!userConfig.esm,
   });
 
   // node polyfill
diff --git a/packages/bundler-webpack/src/schema.ts b/packages/bundler-webpack/src/schema.ts
@@ -117,5 +117,6 @@ export function getSchemas(): Record<string, (Joi: Root) => any> {
     svgo: (Joi) => Joi.alternatives().try(Joi.object(), Joi.boolean()),
     targets: (Joi) => Joi.object(),
     writeToDisk: (Joi) => Joi.boolean(),
+    esm: (Joi) => Joi.object(),
   };
 }
diff --git a/packages/bundler-webpack/src/types.ts b/packages/bundler-webpack/src/types.ts
@@ -48,6 +48,7 @@ export interface IConfig {
   depTranspiler?: Transpiler;
   devtool?: Config.DevTool;
   externals?: WebpackConfig['externals'];
+  esm?: { [key: string]: any };
   extraBabelPlugins?: IBabelPlugin[];
   extraBabelPresets?: IBabelPlugin[];
   extraPostCSSPlugins?: any[];
diff --git a/packages/preset-umi/src/commands/build.ts b/packages/preset-umi/src/commands/build.ts
@@ -110,7 +110,7 @@ umi build --clean
       const markup = await getMarkup({
         ...markupArgs,
         scripts: ['/umi.js'].concat(markupArgs.scripts),
-        esmScript: vite,
+        esmScript: !!opts.config.esm || vite,
         path: '/',
       });
       writeFileSync(
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -117,5 +117,6 @@ export function getSchemas(): Record<string, (Joi: Root) => any> {`
`117`	`117`	`svgo: (Joi) => Joi.alternatives().try(Joi.object(), Joi.boolean()),`
`118`	`118`	`targets: (Joi) => Joi.object(),`
`119`	`119`	`writeToDisk: (Joi) => Joi.boolean(),`
	`120`	`+ esm: (Joi) => Joi.object(),`
`120`	`121`	`};`
`121`	`122`	`}`