Javascript 打字稿和网页包

Javascript 打字稿和网页包,javascript,typescript,webpack,commonjs,Javascript,Typescript,Webpack,Commonjs,我在使用网页包和打字脚本时遇到了一些困难。在我的项目的不同文件夹中有许多.ts文件。早些时候,我没有使用commonjs或AMD等模块系统,但使用了typescript名称空间(模块关键字)。这些文件没有连接成一个文件。这意味着生成了每个.ts文件.js文件,然后所有的.js文件都包含在HTML中 现在我尝试使用webpack和ts加载程序 module.exports = { context: __dirname, entry: "app.ts", output: {

我在使用网页包和打字脚本时遇到了一些困难。在我的项目的不同文件夹中有许多.ts文件。早些时候,我没有使用commonjs或AMD等模块系统,但使用了typescript名称空间(模块关键字)。这些文件没有连接成一个文件。这意味着生成了每个.ts文件.js文件,然后所有的.js文件都包含在HTML中

现在我尝试使用webpack和ts加载程序

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仅编译属于模块的文件。如果我启动typescript编译器,它将像以前一样编译项目中的所有文件

问题是:即使不是commonjs模块,如何在bundle.js中添加所有typescript文件?
谢谢。

不确定您是否能够获得不使用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
    }),

这是我的建议。

我想你实际上并不需要这个网页。您只需使用“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”、“none”、“umd”、“commonjs”。。。设置模块加载。

但我仍然需要smth来加载这些模块、reuqirejs、webpack。。。不是吗?