Wepack强制使用ts-加载程序包含类型记录文件

Question

我已经进入了TypeScript，并与Browserify (与tsify一起玩过)，它的工作很好，直到我切换到Webpack，使用vue和babel与我的项目。

下面是我的项目结构(简化了，它还使用了ASP.NET核心)：

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-，只包含和运行i 所使用的文件。*没有导入文件，"hi i got loaded!"就没有打印出来。.vue文件的情况并非如此。

是否有一种方法可以自动导入这些文件，并使它们都在最后的包中运行？

谢谢:D

Answer 1

简单的答案就是您所发现的:您必须导入文件！Webpack只从您命名为entry (./scripts/App.ts)的文件开始遍历文件树。webpack从来没有见过其他任何东西。

请注意，您可以使用“裸导入”来导入文件，这样做只会产生副作用：

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 (节点)。如果有兴趣，我可以扩展答案，包括一个例子。