fix: typescript compile react mode

Author: hubcarl

config/loader.js

@@ -29,7 +29,7 @@ exports.typescript = {
   exclude: /node_modules/,
   use() {
     const loaders = [];
-    const createTsLoader = options =>{
+    const createTsLoader = options => {
       return { loader: 'ts-loader', options };
     };
     const compile = this.config.compile;
@@ -42,6 +42,10 @@ exports.typescript = {
     if (compile.cache) {
       loaders.unshift(this.createCacheLoader(compile.cache));
     }
+    // react typescript need to dynamic import
+    if (this.typescript && this.framework === 'react') {
+      loaders.unshift(this.createBabelLoader());
+    }
     return loaders;
   }
 };

lib/config.js

@@ -87,6 +87,10 @@ class Config {
     return false;
   }
 
+  get framework() {
+    return this.config.framework;
+  }
+
   get buildPath() {
     return utils.normalizeBuildPath(this.config.buildPath, this.baseDir);
   }

test/helper.js

@@ -0,0 +1,40 @@
+'use strict';
+
+const WebpackTool = require('webpack-tool');
+const merge = WebpackTool.merge;
+const WebpackClientBuilder = require('../lib/client');
+const path = require('path').posix;
+// http://chaijs.com/api/bdd/
+
+exports.createClientBuilder = config => {
+  const builder = new WebpackClientBuilder(merge({
+    entry: {
+      include: path.join(__dirname)
+    }
+  }, config));
+  if (config && config.type) {
+    builder.type = config.type;
+  }
+  builder.setBuildPath(path.join(__dirname, 'dist/client'));
+  builder.setPublicPath('/public');
+  return builder;
+};
+
+exports.getLoaderByName = (name, rules, test) => {
+  const loaderName = `${name}-loader`;
+  return rules.find(rule => {
+    return rule.use.some(loader => {
+      const hasLoader = loaderName === loader || (typeof loader === 'object' && loader.loader === loaderName);
+      if (test && rule.test && typeof loader === 'object') {
+        return rule.test.toString().indexOf(test) > -1 && hasLoader;
+      }
+      return hasLoader;
+    });
+  });
+};
+
+exports.getPluginByLabel = (label, plugins) => {
+  return plugins.find(plugin => {
+    return plugin.__lable__ === label || plugin.__plugin__ === label;
+  });
+};

test/typescript.test.js

@@ -0,0 +1,36 @@
+'use strict';
+const expect = require('chai').expect;
+const helper = require('./helper');
+// http://chaijs.com/api/bdd/
+
+describe('typescript.test.js', () => {
+  before(() => {
+  });
+
+  after(() => {
+  });
+
+  beforeEach(() => {
+  });
+
+  afterEach(() => {
+  });
+
+  describe('#webpack typescript test', () => {
+
+    it('should webpack typescript extendsions test', () => {
+      const builder = helper.createClientBuilder({ loaders: { typescript: true }});
+      const webpackConfig = builder.create();
+      expect(webpackConfig.resolve.extensions).to.include.members(['.ts']);
+    });
+
+    it('should webpack typescript babel test', () => {
+      const builder = helper.createClientBuilder({ framework: 'react', loaders: { typescript: true }});
+      const webpackConfig = builder.create();
+      const loaders = helper.getLoaderByName('ts', webpackConfig.module.rules);
+      expect(webpackConfig.resolve.extensions).to.include.members(['.ts']);
+      expect(loaders.use.length).to.equal(4);
+      expect(loaders.use[0].loader).to.equal('babel-loader');
+    });
+  });
+});

utils/adapter.js

@@ -14,7 +14,7 @@ module.exports = class WebpackAdapter {
     const configLoaders = config.loaders;
     if (utils.isObject(configLoaders)) {
       // 默认 typescript 开启, tslint 开启，eslint 禁用
-      if (configLoaders.typescript) {
+      if (this.builder.typescript) {
         if (utils.isObject(loaders.eslint) && configLoaders.eslint === undefined) {
           this.builder.mergeLoader({ eslint: false });
         }