2016-12-01 2 views
2

Я использую webpack для обработки и сборки моих модулей TypeScript, но мне нужно, чтобы некоторые модули/куски были доступны снаружи. Как мне это сделать?Вывести модуль в глобальный объект Window с помощью Webpack и Typcript


Дополнительная информация

код разделен в разных каталогах, по одному для каждой страницы (/ компонента). Каждая страница содержит несколько файлов, и каждый файл содержит модуль. Это выглядит примерно так:

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