如何从webpacked JS中排除Typescript设置所需的库
问题描述:
感谢您的指导,我们对于深入的Typescript相对较新。诚然,我是一个服务器端的人,但我喜欢Stylcript提供的舒适感觉!感觉在家附近。作为测试案例,我试图将脚本'宝宝步入'已经包含jQuery的主项目中。这个测试用例在其代码中导入jQuery。如何从webpacked JS中排除Typescript设置所需的库
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以某种方式排除此导入?
谢谢!
答
好吧。似乎像这样简单?
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'}
]
}
};