如何从 webpack 输出中访问 bundle.js 函数

我有一个问题让我很困惑，所以我想在这里分享。在我的打字稿项目中，我有一个名为 index.ts 的入口点

使用此 index.ts 我导入其他类，该类也通过导入调用其他类。

为了将所有文件绑定到一个文件中，我正在使用 web 包，最后，我得到了一个捆绑.js文件。问题是当我将此捆绑.js文件包含在文件夹中的HTML页面中时，我尝试访问此捆绑包.js，js文件没有建议我任何功能或其他东西。但是，如果我手动编写函数的名称并在浏览器上检查它，它可以工作。下面我将分享我的代码并使其更清晰：(

这是我的索引.ts文件

import {Location} from './Location'
let a = new Location(10,29)
export function start() {
a.createLocationKeyMaterial(5)
}
export function deneme() {
console.log("ahmet")
}

这是我的 webpack.config 文件

var path = require("path");
module.exports = {
entry: './src/index.ts',
output: {
filename: 'bundle.js',
path: __dirname,
libraryTarget: 'var',
library: 'lockum',
},
module: {
rules: [{
test: /.ts$/,
loader: 'ts-loader',
exclude: /node_modules/,
},
{
test: /.hbs$/,
loader: 'handlebars-loader',
exclude: /node_modules/,
query: {
helperDirs: [
path.resolve(__dirname, "template", 'helpers')
]
}
}
]
},
resolve: {
extensions: [".ts", ".js", ".hbs"]
}
}

我调用的 html 页面

<!DOCTYPE html>
<html>
<head>

<script src="../bundle.js"></script>
<script src="example.js"></script>
<script src= "letssee.ts"></script>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

lockum.start()

所以当我在 example.js 文件中键入 soemthing 时，如果我写 lockum，它会建议我，但在 lockum 之后，当我输入"."时，它并没有建议我任何功能。

和捆绑包的内容.js如下

var lockum = function(t) {
var i = {};
function n(e) {
if (i[e]) return i[e].exports;
var o = i[e] = {
i: e,
l: !1,
exports: {}
};
return t[e].call(o.exports, o, o.exports, n), o.l = !0, o.exports
}
return n.m = t, n.c = i, n.d = function(t, i, e) {
n.o(t, i) || Object.defineProperty(t, i, {
configurable: !1,
enumerable: !0,
get: e
})
}, n.r = function(t) {
Object.defineProperty(t, "__esModule", {
value: !0
})
}, n.n = function(t) {
var i = t && t.__esModule ? function() {
return t.default
} : function() {
return t
};
return n.d(i, "a", i), i
}, n.o = function(t, i) {
return Object.prototype.hasOwnProperty.call(t, i)
}, n.p = "", n(n.s = 2)
}([function(t, i, n) {
"use strict";
Object.defineProperty(i, "__esModule", {
value: !0
});
var e = function() {
function t() {}
return t.calculateLocationKeyMaterial = function(t, i, n) {
if (null == t || null == i) throw new Error("Location information has not been fetched.");
var e = this.includeToleranceDistance(t, i, n);
return console.log("key derivation function input should be: " + e), e
}, t.includeToleranceDistance = function(t, i, n) {
var e = !1,
o = !1;
return t < 0 ? t *= -1 : e = !0, i < 0 && (i *= -1, o = !0), t = this.convertToDegreesDecimalMinutes(t), i = this.convertToDegreesDecimalMinutes(i), t *= 1e4, i *= 1e4, e ? (t = Math.floor(t / (5.4 * n)), t = this.includeLocationSignBits(t, !0)) : (t = Math.floor(t / (5.4 * n)), t = this.includeLocationSignBits(t, !1)), o ? (i = Math.floor(i / (6 * n)), i = this.includeLocationSignBits(i, !0)) : (i = Math.floor(i / (6 * n)), i = this.includeLocationSignBits(i, !1)), t.toString() + i.toString()
}, t.convertToDegreesDecimalMinutes = function(t) {
var i = Math.floor(t),
n = parseFloat((t % 1 * 60).toFixed(5).substring(0, 7));
return parseFloat(i.toString() + n.toString())
}, t.includeLocationSignBits = function(t, i) {
return i ? 201326592 + t : (1 << 27) + t
}, t.createLocationMaterials = function(t, i, n) {
var e, o, r, c, a = !1,
u = !1,
l = new Array;
if (t < 0 ? t *= -1 : t > 0 && (a = !0), i < 0 && (i *= -1, u = !0), t = this.convertToDegreesDecimalMinutes(t), i = this.convertToDegreesDecimalMinutes(i), t *= 1e4, i *= 1e4, a) {
var s = t = Math.floor(t / (5.4 * n));
t = this.includeLocationSignBits(t, !0), e = s - 1, e = this.includeLocationSignBits(e, !0), o = s + 1, o = this.includeLocationSignBits(o, !0)
} else {
s = t = Math.floor(t / (5.4 * n));
t = this.includeLocationSignBits(t, !1), e = s - 1, e = this.includeLocationSignBits(e, !1), o = s + 1, o = this.includeLocationSignBits(o, !1)
}
if (u) {
s = i = Math.floor(i / (6 * n));
i = this.includeLocationSignBits(i, !0), r = s - 1, r = this.includeLocationSignBits(r, !0), c = s + 1, c = this.includeLocationSignBits(c, !0)
} else {
s = i = Math.floor(i / (6 * n));
i = this.includeLocationSignBits(i, !1), r = s - 1, r = this.includeLocationSignBits(r, !1), c = s + 1, c = this.includeLocationSignBits(c, !1)
}
return l[0] = e.toString() + r.toString(), l[1] = e.toString() + i.toString(), l[2] = e.toString() + c.toString(), l[3] = t.toString() + r.toString(), l[4] = t.toString() + i.toString(), l[5] = t.toString() + c.toString(), l[6] = o.toString() + r.toString(), l[7] = o.toString() + i.toString(), l[8] = o.toString() + c.toString(), l
}, t
}();
i.LocationHelper = e
}, function(t, i, n) {
"use strict";
Object.defineProperty(i, "__esModule", {
value: !0
});
var e = n(0),
o = function() {
function t(t, i) {
this.latitude = parseFloat(t.toFixed(6)), this.longitude = parseFloat(i.toFixed(6)), console.log(this.latitude), console.log(this.longitude)
}
return t.prototype.createLocationKeyMaterial = function(t) {
return e.LocationHelper.calculateLocationKeyMaterial(this.latitude, this.longitude, t)
}, t.prototype.createLocationKeyMaterials = function(t) {
return e.LocationHelper.createLocationMaterials(this.latitude, this.longitude, t)
}, t
}();
i.Location = o
}, function(t, i, n) {
"use strict";
Object.defineProperty(i, "__esModule", {
value: !0
});
var e = new(n(1).Location)(10, 29);
i.start = function() {
e.createLocationKeyMaterial(5)
}, i.deneme = function() {
console.log("ahmet")
}
}]);

TypeScript 对分析 JavaScript 的支持不够智能，无法从 Webpack 生成的复杂 JavaScript 代码中确定lockum变量的类型。相反，您可以将lockum复制到新变量，并使用 JSDoc 注释为其指定index.ts模块的类型。将以下内容添加到example.js的顶部：

/** @type {typeof import("./index")} */
var lockum2 = lockum;

(调整路径以指向index.ts。

但是，您最好将计划放入example.js的代码添加到 TypeScript 模块中。

相关内容

最新更新

热门标签：