fix: use tsImportPlugin to load antd in webpack build

zanata · Apr 20, 2018 · 3c9cae4 · 3c9cae4
1 parent 817098f
commit 3c9cae4
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 17 deletions.
diff --git a/server/zanata-frontend/src/package.json b/server/zanata-frontend/src/package.json
@@ -135,6 +135,7 @@
     "reselect": "3.0.1",
     "storybook-host": "4.1.5",
     "style-loader": "0.19.1",
+    "ts-import-plugin": "^1.4.4",
     "tslint": "^5.9.1",
     "tslint-loader": "^3.5.3",
     "typescript": "^2.8.1",
@@ -144,7 +145,7 @@
     "webpack-merge": "4.1.1"
   },
   "dependencies": {
-    "antd": "3.4.0",
+    "antd": "3.4.1",
     "awesome-typescript-loader": "^3.4.1",
     "babel-plugin-import": "1.7.0",
     "babel-polyfill": "6.9.1",

diff --git a/server/zanata-frontend/src/webpack.config.js b/server/zanata-frontend/src/webpack.config.js
@@ -14,7 +14,7 @@ var ManifestPlugin = require('webpack-manifest-plugin')
 // We need this plugin to detect a `--watch` mode. It may be removed later
 // after https://github.com/webpack/webpack/issues/3460 will be resolved.
 const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin
-
+const tsImportPluginFactory = require('ts-import-plugin')
 /**
  * Helper so we can use ternary with undefined to not specify a key
  * @param {any} obj
@@ -158,24 +158,27 @@ module.exports = function (env, isEditor, devServerPort) {
             formatter: 'verbose'
           }
         },
-        // antd build
-        storybook ? undefined : {
-          test: /\.js$/,
-          loader: 'babel-loader',
-          exclude: /node_modules(?!\/antd)/,
-          options: {
-            plugins: [
-              ['import', { libraryName: 'antd', style: true }]
-            ]
-          }
-        },
         /* Transpiles JS/JSX/TS/TSX files through TypeScript (tsc)
          */
         {
           test: /\.(j|t)sx?$/,
           exclude: /node_modules/,
           include: join(__dirname, 'app'),
-          loader: 'awesome-typescript-loader'
+          loader: 'awesome-typescript-loader',
+          // load antd through modular import plugin
+          options: {
+            transpileOnly: true,
+            getCustomTransformers: () => ({
+              before: [ tsImportPluginFactory({
+                libraryName: 'antd',
+                libraryDirectory: 'es',
+                style: 'css'
+              }) ]
+            }),
+            compilerOptions: {
+              module: 'es2015'
+            }
+          }
         },
 
         /* TODO:

diff --git a/server/zanata-frontend/src/yarn.lock b/server/zanata-frontend/src/yarn.lock
@@ -786,9 +786,9 @@ ansi-styles@^3.1.0, ansi-styles@^3.2.0:
   dependencies:
     color-convert "^1.9.0"
 
-antd@3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/antd/-/antd-3.4.0.tgz#ad67872ab3d3e31d32b2b6feabc2fa5f5b27a48e"
+antd@3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/antd/-/antd-3.4.1.tgz#9f93c712e14d692a3db70fa3f254c79874cd3822"
   dependencies:
     array-tree-filter "^2.0.0"
     babel-runtime "6.x"
@@ -10981,6 +10981,12 @@ tryit@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/tryit/-/tryit-1.0.3.tgz#393be730a9446fd1ead6da59a014308f36c289cb"
 
+ts-import-plugin@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/ts-import-plugin/-/ts-import-plugin-1.4.4.tgz#0c12d99f36429fb29b6c1c2e823acff99f5f411b"
+  dependencies:
+    tslib "^1.9.0"
+
 ts-jest@^22.0.1:
   version "22.0.1"
   resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-22.0.1.tgz#48942936a466c2e76e259b02e2f1356f1839afc3"