Question

我进入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，仅包含和运行我import使用过的文件。在不导入文件的情况下，"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（节点）。如果有兴趣，我可以扩大答案以包括一个示例。

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

1 个答案: