Wepack 强制使用 ts-loader 包含打字稿文件答案

【问题标题】：Wepack force typescript files to be included using ts-loaderWepack 强制使用 ts-loader 包含打字稿文件
【发布时间】：2019-06-06 20:59:34
【问题描述】：

我已经开始使用 TypeScript 并使用 Browserify（使用 tsify），它运行良好，直到我切换到 Webpack 以在我的项目中使用 vue 和 babel。

这是我的项目结构（简化，它也使用 ASP.NET Core）：

BestAppEver
  ---| [C# stuff]
  ---| scripts
       ---| pages
               - Login.ts
               - Dashboard.ts
       ---| components
               - CoolThing.vue
       - App.ts
  - package.json
  - webpack.config.js
  - tsconfig.json

pages 中的文件通常包含如下 jquery 声明：

import * as $ from "jquery";
console.log("hi i got loaded!");
$("#deleteConfirmationInput").change(function() {
    if (isInputValid()) {
        $("#deleteConfirmationButton").removeAttr("disabled");
    } else {
        $("#deleteConfirmationButton").attr("disabled", "disabled");
    }
});

这是我的webpack.config.js 文件

var path = require('path');
var webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
module.exports = {
    entry: './scripts/App.ts',
    mode: process.env.NODE_ENV || 'production',
    output: {
        path: path.resolve(__dirname, 'wwwroot/js'),
        filename: 'bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            {
                test: /\.ts(x?)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader'
                    },
                    {
                        loader: 'ts-loader',
                        options: {
                            appendTsSuffixTo: [/\.vue$/]
                        }
                    }
                ]
            }
        ]
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.vue', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
        plugins: [
            new TsconfigPathsPlugin()
        ]
    }
    plugins: [
        new VueLoaderPlugin()
    ],
    devtool: 'source-map'
}

if (process.env.NODE_ENV === 'production') {
    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true
        })
    ]);
}

使用 Browserify 和 tsify，所有文件都被包含并运行，所以"hi i got loaded!" 被打印出来。

使用 ts-loader，只包含并运行我 imported 和使用的文件。 不导入文件，"hi i got loaded!" 不会被打印出来。 .vue 文件不是这种情况。

有没有办法自动导入这些文件并让它们全部在最终包中运行？

谢谢:D

【问题讨论】：

标签： typescript webpack ts-loader

【解决方案1】：

简单的答案正是您发现的：您必须导入文件！ Webpack 仅从您命名为 entry (./scripts/App.ts) 的文件开始遍历文件树。 webpack 根本看不到其他任何东西。

请注意，您可以使用“bare imports”来导入文件，仅用于副作用：

import "./pages/Login.ts";

在这种情况下，您告诉 webpack 您不希望 Login.ts 导出任何内容，但文件应该包含在包中。您可以将这些裸导入放在您的 App.ts 中。

这个问题可能是相关的：ES6 Bare Import: How to use, and when?

另一个选项是将 webpack 配置为使用 entry 的多个值。在您的情况下，您应该能够将 entry 定义为字符串数组：

entry: [
  './scripts/App.ts',
  './scripts/Pages/Login.ts',
  './scripts/Pages/Component.ts'
],

如果你想聪明一点，你可以通过在scripts 目录中递归列出文件来动态生成它。 webpack.config.js 毕竟只是 javascript（节点）。如果有兴趣，我可以扩展答案以包含此示例。

【讨论】：