如何從webpacked JS中排除Typescript設置所需的庫

Question

感謝您的指導，我們對於深入的Typescript相對較新。誠然，我是一個服務器端的人，但我喜歡Stylcript提供的舒適感覺！感覺在家附近。作爲測試案例，我試圖將腳本'寶寶步入'已經包含jQuery的主項目中。這個測試用例在其代碼中導入jQuery。

import $ = require("jquery"); 

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

這編譯（與打字稿）到這個預期的格式

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