fix(build): fix exports in UMD build (#3540)

layershifter · web-flow · commit 12e4d786f8c1 · 2019-03-29T12:08:20.000+02:00
* fix(build): fix exports in UMD build

* build umd before test
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -46,6 +46,9 @@ jobs:
       - run:
           name: Test JavaScript
           command: yarn test
+      - run:
+          name: Test UMD bundle
+          command: yarn test:umd
       - run:
           name: Report coverage
           command: bash <(curl -s https://codecov.io/bash)
diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
     "pretest": "yarn satisfied && gulp build:docs:docgen",
     "test": "cross-env NODE_ENV=test node -r @babel/register ./node_modules/karma/bin/karma start karma.conf.babel.js",
     "test:watch": "yarn test --no-single-run",
+    "test:umd": "gulp build:dist:umd && node test/umd.js",
     "tsd:lint": "tslint \"./index.d.ts\" \"./src/**/*.d.ts\" \"./src/**/*.tsx\" \"./test/**/*.d.ts\" \"./test/**/*.tsx\"",
     "tsd:lint:fix": "yarn tsd:lint --fix",
     "tsd:test": "gulp build:dist:commonjs:tsd && tsc -p ./ && rm test/typings.js"
diff --git a/src/umd.js b/src/umd.js
@@ -3,8 +3,4 @@
 // Do not replace this with named exports.
 // We need to export an object here for browser builds.
 // Otherwise, we end up with every component on the window.
-import * as semanticUIReact from './index'
-
-module.exports = {
-  ...semanticUIReact,
-}
+export * from './index'
diff --git a/test/umd.js b/test/umd.js
@@ -0,0 +1,62 @@
+const assert = require('assert')
+const fs = require('fs')
+const http = require('http')
+const puppeteer = require('puppeteer')
+
+const config = require('../config')
+
+const html = `
+<!DOCTYPE html>
+<html>
+<body>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.5/umd/react.production.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.5/umd/react-dom.production.min.js"></script>
+  <script src="/umd.js"></script>
+  
+  <div id="root"></div>
+  <script>
+    ReactDOM.render(
+      React.createElement(semanticUIReact.Button, null, "Foo"),
+      document.getElementById("root"),
+    )
+  </script>
+</body>
+`
+
+const assertInnerHtml = async () => {
+  const browser = await puppeteer.launch()
+  const server = http
+    .createServer((req, response) => {
+      if (req.url === '/umd.js') {
+        fs.readFile(config.paths.dist('umd', 'semantic-ui-react.min.js'), (err, data) => {
+          response.setHeader('Content-type', 'text/javascript')
+          response.end(data)
+        })
+        return
+      }
+
+      response.setHeader('Content-type', 'text/html')
+      response.end(html)
+    })
+    .listen(9000)
+
+  const page = await browser.newPage()
+  await page.goto('http://localhost:9000')
+
+  const innerHtml = await page.evaluate(() => document.querySelector('#root').innerHTML)
+
+  await browser.close()
+  server.close()
+
+  assert.equal(
+    innerHtml,
+    '<button class="ui button">Foo</button>',
+    'UMD bundle test: Something wrong with UMD build, please check!',
+  )
+}
+
+assertInnerHtml().catch((e) => {
+  // eslint-disable-next-line no-console
+  console.error(e)
+  process.exit(1)
+})
diff --git a/webpack.umd.config.js b/webpack.umd.config.js
@@ -1,3 +1,4 @@
+const TerserPlugin = require('terser-webpack-plugin')
 const webpack = require('webpack')
 
 const config = require('./config')
@@ -47,6 +48,17 @@ const webpackUMDConfig = {
     maxEntrypointSize: 750000,
     maxAssetSize: 750000,
   },
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          output: {
+            comments: false,
+          },
+        },
+      }),
+    ],
+  },
 }
 
 module.exports = webpackUMDConfig
