Wepack принудительно включает файлы машинописного текста, используя ts-loader - PullRequest
Новая
       18

Wepack принудительно включает файлы машинописного текста, используя ts-loader

1 голос
/ 06 июня 2019

Я попал в 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-loader только файлы, которые * imported и used включены и запущены. Без импорта файла "hi i got loaded!" не был распечатан.Это не относится к .vue файлам.

Есть ли способ автоматически импортировать эти файлы и заставить их все работать в финальном комплекте?

Спасибо: D

1 Ответ

1 голос
/ 07 июня 2019

Простой ответ - именно то, что вы обнаружили: вы должны импортировать файлы!Webpack только перебирает дерево файлов, начиная с файла, который вы называете entry (./scripts/App.ts).Все остальное просто никогда не замечается в веб-пакете.

Обратите внимание, что вы можете использовать «чистый импорт» для импорта файла только для побочного эффекта: 

import "./pages/Login.ts";

В этом случае вы говоритеWebpack, который вы не ожидаете, что Login.ts будет экспортировать что-либо, но файл должен быть включен в комплект.Вы можете разместить эти голые данные в вашем App.ts.

. Этот вопрос может быть актуален: ES6 Bare Import: как использовать и когда?

Другим вариантом является настройка веб-пакета для использования нескольких значений для entry.В вашем случае вы должны быть в состоянии определить entry как массив строк: 

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

Если вы хотите быть умным, вы можете динамически генерировать это, рекурсивно перечисляя файлы в каталоге scripts,webpack.config.js - это всего лишь javascript (узел).Если интересно, я могу расширить ответ, чтобы включить пример этого.

...