From a9835ab625a50b1c0ec2b381f41ae4cf3bc2434a Mon Sep 17 00:00:00 2001 From: JounQin Date: Wed, 15 Nov 2017 00:52:18 +0800 Subject: [PATCH] feat(loader): Add support for dynamic import (#90) --- docs/options.md | 18 ++++++++++++++---- spec/index.spec.js | 36 ++++++++++++++++++++++++++++++------ spec/utils.spec.js | 17 ++++++++++++++--- src/index.js | 2 ++ src/utils.js | 13 ++++++++++--- 5 files changed, 70 insertions(+), 16 deletions(-) diff --git a/docs/options.md b/docs/options.md index 50e6429..f8f01ed 100644 --- a/docs/options.md +++ b/docs/options.md @@ -37,7 +37,7 @@ replacement } ``` -If you prefer to use `System.import`, set the `loader` to `system` +To use `System.import`, set the `loader` to `system` **NOTE:** Using `system` only works with Webpack 2. Webpack 1 users should use the default. @@ -45,9 +45,19 @@ replacement ```ts { path: 'lazy', - loadChildren: () => System.import('./lazy/lazy.module').then(function(module) { - return module['LazyModule']; - }) + loadChildren: () => System.import('./lazy/lazy.module').then(module => module['LazyModule']) +} +``` + +To use `dynamic import`, set the `loader` to `import` + +**NOTE:** Using `import` only works with Webpack >= 2.1.0. + +replacement +```ts +{ + path: 'lazy', + loadChildren: () => import('./lazy/lazy.module').then(module => module['LazyModule']) } ``` diff --git a/spec/index.spec.js b/spec/index.spec.js index 08b5d46..e64caea 100644 --- a/spec/index.spec.js +++ b/spec/index.spec.js @@ -162,9 +162,7 @@ describe('Loader', function() { it ('should return a loadChildren System.import statement', function() { var result = [ 'loadChildren: () => System.import(\'./path/to/file.module\')', - ' .then(function(module) {', - ' return module[\'FileModule\'];', - ' })' + ' .then(module => module[\'FileModule\'])' ]; var loadedString = loader.call({ @@ -175,6 +173,20 @@ describe('Loader', function() { checkResult(loadedString, result); }); + it ('should return a loadChildren dynamic import statement', function() { + var result = [ + 'loadChildren: () => import(\'./path/to/file.module\')', + ' .then(module => module[\'FileModule\'])' + ]; + + var loadedString = loader.call({ + resourcePath: resourcePath, + query: '?loader=import' + }, `loadChildren: '${modulePath}'`); + + checkResult(loadedString, result); + }); + it('should return a loadChildren async require statement with default', function() { var modulePath = './path/to/file.module'; @@ -290,9 +302,7 @@ describe('Loader', function() { it ('should return a loadChildren System.import statement', function() { var result = [ 'loadChildren: () => System.import(\'./path/to/file.module.ngfactory\')', - ' .then(function(module) {', - ' return module[\'FileModuleNgFactory\'];', - ' })' + ' .then(module => module[\'FileModuleNgFactory\'])' ]; var loadedString = loader.call({ @@ -303,6 +313,20 @@ describe('Loader', function() { checkResult(loadedString, result); }); + it ('should return a loadChildren dynamic import statement', function() { + var result = [ + 'loadChildren: () => import(\'./path/to/file.module.ngfactory\')', + ' .then(module => module[\'FileModuleNgFactory\'])' + ]; + + var loadedString = loader.call({ + resourcePath: resourcePath, + query: query + '&loader=import' + }, `loadChildren: '${modulePath}'`); + + checkResult(loadedString, result); + }); + it('should support a custom moduleSuffix', function() { var moduleSuffix = '.ngfile'; diff --git a/spec/utils.spec.js b/spec/utils.spec.js index fd68b50..32a71a6 100644 --- a/spec/utils.spec.js +++ b/spec/utils.spec.js @@ -71,15 +71,26 @@ describe('Utils', function() { it('should return an asynchronous System.import loadChildren statement', function() { var result = [ 'loadChildren: () => System.import(\'' + path + '\')', - ' .then(function(module) {', - ' return module[\'' + name + '\'];', - ' })' + ' .then(module => module[\'' + name + '\'])' ]; getSystemLoader('path', 'name', true).should.eql(result.join('')); }); }); + describe('getImportLoader', function() { + var getImportLoader = utils.getImportLoader; + + it('should return an asynchronous dynamic import loadChildren statement', function() { + var result = [ + 'loadChildren: () => import(\'' + path + '\')', + ' .then(module => module[\'' + name + '\'])' + ]; + + getImportLoader('path', 'name', true).should.eql(result.join('')); + }); + }); + describe('normalizeFilePath', function() { var pmock = require('pmock'); var normalizeFilePath = utils.normalizeFilePath; diff --git a/src/index.js b/src/index.js index 6f109d3..551b806 100644 --- a/src/index.js +++ b/src/index.js @@ -90,6 +90,8 @@ module.exports = function(source, sourcemap) { replacement = utils.getSyncLoader(filePath, moduleName, inline); } else if (loader === 'system') { replacement = utils.getSystemLoader(filePath, moduleName, inline); + } else if (loader === 'import') { + replacement = utils.getImportLoader(filePath, moduleName, inline); } else { replacement = utils.getRequireLoader(filePath, chunkName, moduleName, inline, isJs); } diff --git a/src/utils.js b/src/utils.js index 58d3227..9162944 100644 --- a/src/utils.js +++ b/src/utils.js @@ -35,9 +35,16 @@ module.exports.getRequireLoader = function(filePath, chunkName, moduleName, inli module.exports.getSystemLoader = function(filePath, moduleName, inline) { var result = [ 'loadChildren: () => System.import(\'' + filePath + '\')', - ' .then(function(module) {', - ' return module[\'' + moduleName + '\'];', - ' })' + ' .then(module => module[\'' + moduleName + '\'])' + ]; + + return inline ? result.join('') : result.join('\n'); +}; + +module.exports.getImportLoader = function(filePath, moduleName, inline) { + var result = [ + 'loadChildren: () => import(\'' + filePath + '\')', + ' .then(module => module[\'' + moduleName + '\'])' ]; return inline ? result.join('') : result.join('\n');