Typescript和webpack

Question

我对webpack和打字稿有一些困难。我的项目中有很多.ts文件在不同的文件夹中。早些时候，我没有使用像commonjs或AMD这样的模块系统，但是使用了打字机命名空间（模块关键字）。这些文件没有连成一个文件。这意味着生成了附近的每个.ts文件.js文件，然后所有.js文件都包含在HTML中。

现在我尝试使用webpack和ts-loader。

module.exports = { 
    context: __dirname, 
    entry: "app.ts", 
    output: { 
     path: __dirname, 
     filename: 'bundle.js' 
    }, 
    resolve: { 
     root: __dirname, 
     extensions: ["", ".webpack.js", ".web.js", ".js",".ts", ".tsx"] 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.tsx?$/, 
       loader: 'ts-loader' 
      } 
     ] 
    } 
} 

在bundle.js编译后的文件我只能找到编译内容app.ts，但并不是所有的其他文件。据我了解，这是因为我没有使用import关键字。 Webpack ts-loader只编译那些是模块的文件。如果我启动打字稿编译器，它将像早些时候那样编译我的项目中的所有文件。

问题是：如何在bundle.js中添加所有打字稿文件，即使它们不是commonjs模块？ 谢谢。

Answer 1

不知道你将能够获得不使用CJS或UMD模块，但也许我不理解问题？如果你只是想连接并捆绑你的ts，tsx文件而不管导入和基于扩展名，你可以使用ExtractTextPlugin和相应的加载器。像这样的东西可能会起作用。

module: { 
    loaders: [ 
     { 
      test: /\.tsx?$/, 
      loader: ExtractTextPlugin.extract('ts-loader') 
     } 
    ] 
}, 
plugins: [ 
    new ExtractTextPlugin('typescript.[chunkhash].js', { 
     disable: false, 
     allChunks: true // extract all ts 
    }), 

这里是documentation。

Answer 2

我想你实际上并不需要webpack。你可以简单地使用“files”属性来定义你的tsconfig.json，然后“tsc”应该完成你所需要的所有工作。

{ 
    "compilerOptions": { 
    "target": "es6", 
    "allowSyntheticDefaultImports": true, 
    "sourceMap": true, 
    "allowJs": true, 
    "outDir": "build" 
    }, 
    "exclude": ["node_modules"], 
    "files": ["typings/index.d.ts", "entry.ts", "file1.ts", "file2.ts" , .... ] 
} 

您还可以配置 “compilerOptions.module” 到 “AMD”， “无”， “UMD”， “CommonJS的” ......设置的模块加载。