Как получить доступ к функциям bundle.js из вывода webpack
У меня есть вопрос, который меня сильно смущает, поэтому я хотел бы поделиться им здесь. В моем проекте машинописного текста у меня есть точка входа под названием index.ts
Используя этот index.ts, я импортирую другой класс, и этот класс также вызывает другие через импорт.
Чтобы связать все файлы в один файл, я использую веб-пакет и в конце получаю файл bundle.js. Вопрос в том, когда я включаю этот файл bundle.js в свою HTML-страницу, которая находится внутри папки, и пытаюсь добраться до этого bundle.js, файл js не предлагает мне никаких функций или чего-то еще. однако, если я напишу имя функции вручную и проверю его в браузере, она работает. Далее я поделюсь своим кодом и сделаю его более понятным :)
это мой файл index.ts
import {Location} from './Location'
let a = new Location(10,29)
export function start() {
a.createLocationKeyMaterial(5)
}
export function deneme() {
console.info("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, если я пишу lockum, он предлагает мне это, но после lockum, когда я набираю "." это не предлагает мне никаких функций.
и содержимое bundle.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.info("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.info(this.latitude), console.info(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.info("ahmet")
}
}]);
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Поддержка TypeScript для анализа JavaScript недостаточно умен, чтобы определить тип переменной lockum из сложного кода JavaScript, сгенерированного Webpack. Вместо этого вы можете скопировать lockum в новую переменную и присвоить ей тип вашего модуля index.ts, используя Комментарий JSDoc. Добавьте в начало example.js следующее:
/** @type {typeof import("./index")} */
var lockum2 = lockum;
(Отрегулируйте путь так, чтобы он указывал на index.ts.)
Однако вам может быть лучше просто добавить код, который вы планировали вставить в example.js, в модуль TypeScript.
Как далеко ты ушел? Если вы удерживаете Control и нажимаете на ./index, вы переходите на index.ts? Если навести указатель мыши на lockum2, какой тип отображается?
Привет, я попробовал, и браузер сообщает мне, что в этом случае блокировка не определена, а также сообщает: Uncaught SyntaxError: Unexpected token <
Это странно: если bundle.js такой, как показано в вопросе, вы ни в коем случае не должны получать lockum undefined после того, как bundle.js создает его напрямую. Можете ли вы опубликовать репозиторий, который воспроизводит проблему за вас? Возможно, здесь есть что-то еще, что вы не описали в вопросе. В каком файле и строке сообщается об ошибке SyntaxError?
Уважаемый Мэтт! Прежде всего, большое спасибо за искреннее руководство! Я добавил образец проекта в github github.com/lifeanddeath/typescriptBundle, если вы его проверите и скажете, что я делаю не так, я буду вечно признателен за то, что, как я уже сказал ранее, создается bundle.js, и я просто хотел попробовать свою библиотеку локально в Пример папки, чтобы увидеть, как это работает. Например, как вы можете видеть из файла html, я сначала вызываю bundle.js, а затем хочу получить доступ к этим функциям start и deneme из моего пакета. однако они не показываются. Большое спасибо заранее!
Я скачал репозиторий и открыл example/example.html в браузере, не внося никаких изменений. Я не получаю никаких ошибок и вижу в консоли разработчика, что переменная lockum2 определена правильно. Так что я не знаю, что с тобой не так. Re example.js не дает вам предложений о ваших функциях: просто нужно изменить путь импорта на "../../src/index", и тогда он сработает для меня. Все дело в том, что путь должен указывать на ваш код TypeScript, потому что bundle.js слишком сложен для анализа языковой службой TypeScript.
Дорогой Мэтт, мне очень жаль, что я беспокою тебя своим вопросом, но я не получил пару баллов. поэтому, прочитав ваш ответ (я действительно очень благодарен вам), я пошел и снова загрузил тот же проект с github. Я открыл браузер, ничего не трогая, и изменил путь, как вы предложили. Затем, когда я пишу lockum2 на консоли, я вижу, что он отображается, а также функция, и если я запускаю функцию deneme, она возвращает мне в первой строке ahmet (ожидаемый результат), а во второй строке указано undefined. если я вызываю метод запуска, он просто возвращает undefined. вы имеете в виду путь в части @type?
Мне очень жаль спрашивать о многом, но, если я прихожу в Visual Studio code ide, теперь я вижу функции, но если я вызываю их через ide, на консоли ничего не отображается, это работает только тогда, когда я вызываю его в браузер ... Дорогой Мэтт, я должен отправить свой главный проект в ближайшее время, и это единственная проблема, которая у меня осталась, если бы вы могли помочь мне через командную программу просмотра или gmail, я бы очень хотел вас поблагодарить, есть ли у меня возможность связаться с вами через любую форму, пожалуйста? для меня это вопрос жизни и смерти
Что касается возврата undefined от start, вам не хватает return перед a.createLocationKeyMaterial(5,9) в index.ts. Если я добавлю lockum2.deneme(); к example.js, я увижу ahmet в консоли, как и ожидалось. Точно так же, если я внесу исправление в start, запустил webpack и добавлю console.info(lockum2.start()); в example.js, я увижу 14, который выглядит правильным. (Без console.info14 просто возвращают и выбрасывают.) Надеюсь, это все, что вам не хватало. В противном случае я могу помочь вам устранить неполадки, если вы свяжетесь со мной в Google Hangouts ([email protected]).
Для записи, похоже, что код работал после изменений из моего предыдущего комментария, и во время нашего разговора мы просто прояснили понимание роли tsc, webpack, объявлений типов, а также публикации и использования пакетов.
Привет, Мэтт, спасибо за предупреждение, но эта неудача не сработала. Честно говоря, я пытаюсь скомпилировать несколько файлов машинописного текста в один файл js (я пытаюсь создать библиотеку) и обслуживать все из этого единственного файла js, однако это действительно кажется проблемой. жопа, я провел несколько дней, не работает.