如何从 webpack IS 中排除 Typescript 设置所需的库答案

【问题标题】：How to exclude from webpacked JS, a library that's required by the Typescript setup如何从 webpack IS 中排除 Typescript 设置所需的库
【发布时间】：2018-03-31 12:44:24
【问题描述】：

感谢您的指导，我对深度 Typescript 还比较陌生。诚然，我是一名服务器端研究员，但我喜欢 Typescript 提供的舒适感觉！有家的感觉。

作为测试用例，我正在尝试将脚本“逐步”添加到已经包含 jQuery 的主要项目中。此测试用例在其代码中导入 jQuery。

import $ = require("jquery");

class TestCase {
    constructor(localeData) {
        $('body').css('background', 'blue');
    }
}

这会（使用 Typescript）编译成这种预期的格式

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const $ = require("jquery");
class TestCase {
    constructor(localeData) {
        $('body').css('background', 'blue');
    }
}

除此之外，我还执行了以下命令：

npm install -g webpack

npm install ts-loader --save

并添加了这个 webpack.config.js

module.exports = {
    entry: './testcase.ts',
    output: {
        filename: 'testcase.js'
    },
    resolve: {
        extensions: ['.webpack.js', '.web.js', '.ts', '.js']
    },
    module: {
        loaders: [
            {test: /\.ts$/, loader: 'ts-loader'}
        ]
    }
};

此后我运行“webpack”并在我的小测试脚本之前按预期获取所有 jQuery。需要注意的是，我要在其中插入它的项目已经包含 jQuery。

我该如何处理这种情况；我想我必须告诉 webpack 以某种方式排除这个导入？

谢谢！

【问题讨论】：

标签： typescript webpack webpack-2

【解决方案1】：

嗯。好像就这么简单？

module.exports = {
    entry: './testcase.ts',
    output: {
        filename: 'testcase.js'
    },
    resolve: {
        extensions: ['.webpack.js', '.web.js', '.ts', '.js']
    },
    externals: {
        "jquery": "jQuery",
    },
    module: {
        loaders: [
            {test: /\.ts$/, loader: 'ts-loader'}
        ]
    }
};

【讨论】：