2016-12-01 71 views
2

我正在使用webpack来处理和捆绑我的TypeScript模块,但是我需要一些可从外部使用的模块/块。我该怎么做呢?使用Webpack和Typescript将模块公开到全局Window对象


附加信息

该代码是在不同的目录分裂,一个用于每个页面(/分量)。每个页面都包含多个文件,每个文件都包含一个模块。它看起来是这样的:

js/ 
    ├ page1/ 
    | ├ entry.ts 
    | ├ module1.ts 
    | └ module2.ts 
    ├ page2/ 
    | ├ entry.ts 
    | ├ module3.ts 
    | └ module4.ts 

打字稿模块定义如下

import {Module2} from "./module2"; 
export module Module1 { 

    export function someFunc():int { 
     return Module2.someVal; 
    } 

} 

而且我用一口-的WebPack编译和打包模块的每一页:

gulp.task('javascript', function() { 
    return gulp.src('src/js/**/entry.ts') 
     .pipe(named(function (file) { 
      // Sets file.named to the containing directory name (used by webpack) 
      return path.dirname(file.path).substr(path.dirname(file.path).replace(/\\/g, '/').lastIndexOf('/') + 1); 
     })) 
     .pipe(webpack({ 
      resolve: { 
       extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js'] 
      }, 
      module: { 
       loaders: [ 
        {test: /\.tsx?$/, loader: 'ts-loader'} 
       ] 
      }, 
      plugins: [ 
       new CommonsChunkPlugin({ 
        name: "bundle", 
        minChunks: 3 
       }) 
      ], 
      output: { 
       filename: '[name].js' 
      }, 
      devtool: 'source-map' 
     })) 
     .pipe(gulp.dest('dest/js')) 
}); 

现在我需要Module1.someFunc()可以从全局范围访问,所以它可以被其他(外部)组件使用。我已经看过expose loader,但我不明白在这种情况下如何工作。

任何帮助将不胜感激!

回答

0

无论如何,我想通过曝光加载器来做到这一点。在entry.ts我用:

import x = require("expose-loader?M1!./module1"); 

其中通过M1.Module1.someFunc()从外部提供的功能。我的IDE和gulp-webpack都抛出一个错误,但最终仍然以某种方式工作。对我来说够好!

+0

如果没有'import x ='部分,你能逃脱吗? –

+0

这也好像只是'import'expose-loader?M1!./ module1“' – IronSean

相关问题