打字稿和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
    }),

這是文檔 。

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”，“ none”，“ umd”，“ commonjs” ...以設置模塊加載。