如何从 webpacked JS 中排除 Typescript 设置所需的库

Question

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

作为测试用例，我正在尝试 'baby steps' 将脚本添加到已经包含 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 以某种方式排除这个导入？

谢谢！

Answer 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'}
        ]
    }
};

如何从 webpacked JS 中排除 Typescript 设置所需的库

How to exclude from webpacked JS, a library that's required by the Typescript setup

typescript

webpack

webpack-2