feat: support thread-loader and cache-loader for babel and ts

config/config.js

@@ -19,6 +19,10 @@ exports.config = {
   plugins: {},
   optimization: {
     minimize: false
+  },
+  compile:{
+    cache: false,
+    thread: false
   }
 };
 
@@ -68,6 +72,7 @@ exports.dllConfig = {
     commonsChunk: false,
     imagemini: false,
     manifest: false,
-    manifestDll: true
+    manifestDll: true,
+    tsChecker: false
   }
 };

config/loader.js

@@ -5,11 +5,17 @@ exports.babel = {
   test: /\.jsx?$/,
   exclude: /node_modules/,
   use() {
-    const loader = 'babel-loader'
-    if (this.config.cache) {
-      return [this.createCacheLoader(loader, this.config.cache)];
+    const loaders = [];
+    const compile = this.config.compile;
+    if (compile.thread) {
+      loaders.unshift(this.createThreadLoader(this.config.thread));
     }
-    return [loader];
+    if (compile.cache) {
+      loaders.push(this.createCacheLoader(this.config.cache, 'babel-loader'));
+    } else {
+      loaders.push({ loader: 'babel-loader', options: {} });
+    }
+    return loaders;
   }
 };
 
@@ -26,10 +32,19 @@ exports.typescript = {
   test: /\.ts$/,
   exclude: /node_modules/,
   use() {
-    const loaders = ['ts-loader'];
-    if(this.config.cache) {
-      const cacheLoader = this.createCacheLoader('cache-loader', this.config.cache);
-      loaders.unshift(cacheLoader);
+    const loaders = [];
+    const createTsLoader = options =>{
+      return { loader: 'ts-loader', options };
+    };
+    const compile = this.config.compile;
+    if (compile.thread) {
+      loaders.unshift(this.createThreadLoader(this.config.thread));
+      loaders.push(createTsLoader({ happyPackMode: true }));
+    } else {
+      loaders.push(createTsLoader());
+    }
+    if (compile.cache) {
+      loaders.unshift(this.createCacheLoader(this.config.cache));
     }
     return loaders;
   }

config/plugin.js

@@ -291,4 +291,22 @@ exports.serviceworker = {
       localPublicPath: this.config.publicPath
     };
   }
+};
+
+exports.tschecker = {
+  enable: false,
+  type: 'client',
+  name: 'fork-ts-checker-webpack-plugin',
+  args() {
+    const filepath = path.resolve(this.baseDir, this.config.egg ? 'app/web/tsconfig.json' : 'tsconfig.json');
+    const arg = {
+      silent: true,
+      memoryLimit: 512,
+      checkSyntacticErrors: true
+    };
+    if (fs.existsSync(filepath)) {
+      arg.tsconfig = filepath;
+    }
+    return arg;
+  }
 };

lib/base.js

@@ -514,13 +514,21 @@ class WebpackBaseBuilder extends Config {
   }
 
   createPostCssLoader(loaderOptions) {
+    const loader = 'postcss-loader';
     const options = this.merge(this.config.devtool ? { sourceMap: true } : {}, loaderOptions);
-    return { loader: 'postcss-loader', options };
+    return { loader, options };
   }
 
-  createCacheLoader(loader, cacheOptions) {
+  createCacheLoader(loaderOptions, name) {
+    const loader = name || 'cache-loader';
     const cacheDirectory = this.utils.getCacheLoaderInfoPath(loader, this.env, this.type);
-    const options = this.utils.isObject(cacheOptions) ? this.merge({ cacheDirectory }, cacheOptions) : { cacheDirectory };
+    const options = this.utils.isObject(loaderOptions) ? this.merge({ cacheDirectory }, loaderOptions) : { cacheDirectory };
+    return { loader, options };
+  }
+
+  createThreadLoader(loaderOptions) {
+    const loader = 'thread-loader';
+    const options = this.utils.isObject(loaderOptions) ? this.merge({ workers: 2 }, loaderOptions): {};
     return { loader, options };
   }
 

test/base.test.js

@@ -115,27 +115,45 @@ describe('base.test.js', () => {
   });
   describe('#webpack cache loader test', () => {
     it('should create babel cache loader disable test', () => {
-      const builder = createBuilder({
-        cache: false,
-      });
+      const builder = createBuilder();
       const webpackConfig = builder.create();
       const cacheLoader = getLoaderByName('cache', webpackConfig.module.rules);
       expect(cacheLoader.length).to.equal(0);
     });
-    it('should create babel typescript cache loader test', () => {
+    it('should create babel-loader cache and thread test', () => {
+      const cacheDirectory = utils.getCacheLoaderInfoPath('babel-loader')
+      const builder = createBuilder({
+        compile:{
+          cache: true,
+          thread: true
+        }
+      });
+      const webpackConfig = builder.create();
+      const babelLoader = getLoaderByName('babel', webpackConfig.module.rules);
+      expect(babelLoader[0].use.length).to.equal(2);
+      expect(babelLoader[0].use[0].loader).to.equal('thread-loader');
+      expect(babelLoader[0].use[1].loader).to.equal('babel-loader');
+      expect(babelLoader[0].use[1].options.cacheDirectory).to.equal(cacheDirectory);
+    });
+    it('should create ts-loader cache and thread test', () => {
       const cacheDirectory = utils.getCacheLoaderInfoPath('cache-loader')
       const builder = createBuilder({
         loaders:{
           typescript: true
+        },
+        compile:{
+          cache: true,
+          thread: true
         }
       });
       const webpackConfig = builder.create();
       const cacheLoader = getLoaderByName('cache', webpackConfig.module.rules);
       expect(cacheLoader.length).to.equal(1);
-      expect(cacheLoader[0].use.length).to.equal(2);
+      expect(cacheLoader[0].use.length).to.equal(3);
       expect(cacheLoader[0].use[0].loader).to.equal('cache-loader');
       expect(cacheLoader[0].use[0].options.cacheDirectory).to.equal(cacheDirectory);
-      expect(cacheLoader[0].use[1].loader).to.equal('ts-loader');
+      expect(cacheLoader[0].use[1].loader).to.equal('thread-loader');
+      expect(cacheLoader[0].use[2].loader).to.equal('ts-loader');
     });
     it('should create babel typescript config test', () => {
       const cacheDirectory = utils.getCacheLoaderInfoPath('cache-loader')
@@ -146,6 +164,9 @@ describe('base.test.js', () => {
               configFile: __dirname
             }
           }
+        },
+        compile:{
+          cache: true
         }
       });
       const webpackConfig = builder.create();

test/client.test.js

@@ -329,12 +329,15 @@ describe('client.test.js', () => {
       expect(eslint.use[0].loader).to.equal('eslint-loader');
     });
 
-    it('should typescript enable test', () => {
+    it('should typescript cache enable test', () => {
       const builder = createBuilder({
         loaders:{
           eslint: true,
           tslint: true,
           typescript: true
+        },
+        compile:{
+          cache: true
         }
       });
       const webpackConfig = builder.create();
@@ -348,7 +351,31 @@ describe('client.test.js', () => {
       expect(webpackConfig.resolve.extensions).to.include.members(['.ts', '.js']);
     });
 
-    it('should typescript config test', () => {
+    it('should typescript cache and thread enable test', () => {
+      const builder = createBuilder({
+        loaders:{
+          eslint: true,
+          tslint: true,
+          typescript: true
+        },
+        compile:{
+          cache: true,
+          thread: true
+        }
+      });
+      const webpackConfig = builder.create();
+      const tsLoader = getLoaderByName('ts', webpackConfig.module.rules);
+      const eslint = getLoaderByName('eslint', webpackConfig.module.rules);
+      const tslint = getLoaderByName('tslint', webpackConfig.module.rules);
+      expect(tsLoader.use[0].loader).to.equal('cache-loader');
+      expect(tsLoader.use[1].loader).to.equal('thread-loader');
+      expect(tsLoader.use[2].loader).to.equal('ts-loader');
+      expect(eslint.use[0].loader).to.equal('eslint-loader');
+      expect(tslint.use[0].loader).to.equal('tslint-loader');
+      expect(webpackConfig.resolve.extensions).to.include.members(['.ts', '.js']);
+    });
+
+    it('should typescript cache config test', () => {
       const configFile = path.resolve(__dirname, './app/web/tsconfig.json');
       const builder = createBuilder({
         loaders:{
@@ -357,6 +384,9 @@ describe('client.test.js', () => {
               configFile,
             }
           }
+        },
+        compile:{
+          cache: true
         }
       });
       const webpackConfig = builder.create();

test/loader.test.js

@@ -340,22 +340,10 @@ describe('loader.test.js', () => {
       expect(urlLoader.use[0].options.limit).to.equal(10000);
     });
   });
-  describe('#webpack babel loader test', () => {
-    it('should babel-loader default config', () => {
-      const cacheDirectory = utils.getCacheLoaderInfoPath('babel-loader', 'dev');
-      const builder = createBuilder();
-      const webpackConfig = builder.create();
-      const babelLoader = getLoaderByName('babel', webpackConfig.module.rules);
-      expect(babelLoader.use.length).to.equal(1);
-      expect(babelLoader.use[0].options.cacheDirectory).to.equal(cacheDirectory);
-    });
-  });
   describe('#webpack config cache test', () => {
-    it('should config cache false config', () => {
+    it('should config babel loader cache false config', () => {
       const cacheDirectory = utils.getCacheLoaderInfoPath('babel-loader', 'dev');
-      const builder = createBuilder({
-        cache: false
-      });
+      const builder = createBuilder();
       const webpackConfig = builder.create();
       const babelLoader = getLoaderByName('babel', webpackConfig.module.rules);
       expect(babelLoader.use.length).to.equal(1);
@@ -364,7 +352,9 @@ describe('loader.test.js', () => {
     it('should config cache undefined config', () => {
       const cacheDirectory = utils.getCacheLoaderInfoPath('babel-loader', 'dev');
       const builder = createBuilder({
-        cache: undefined
+        compile:{
+          cache: true
+        }
       });
       const webpackConfig = builder.create();
       const babelLoader = getLoaderByName('babel', webpackConfig.module.rules);