Используя webpack, я создаю расширение библиотеки. Проблема в том, что библиотека должен быть загружен с [определенного сервера.]
Основной класс статистики расширения с:
class MyExtension extends Autodesk.Viewing.Extension {
// ...
}
Код HTML:
<script src = "https://developer.api.autodesk.com/modelderivative/v2/viewers/6.*/viewer3D.min.js"></script>
<script src = "lib/extension.js"></script>
Проблема в том, что константа Autodesk
не является модулем npm, поэтому, когда включены оба файла JS, возникает эта ошибка:
Uncaught ReferenceError: Autodesk is not defined
Мой вопрос: как создать это расширение таким образом, чтобы оно оценивалось после загрузки страницы?
Наблюдения: Работает при использовании сборки webpack dev, но не работает с производственной сборкой.
Редактировать: Работает, когда я загружаю файлы JS на главную страницу. Эта проблема возникает, когда библиотеки загружаются в запросе AJAX (в частности, я использую его в Вкладка Bootstrap)
package.json
{
"name": "extension",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"scripts": {
"build": "WEBPACK_ENV=build webpack",
"dev": "WEBPACK_ENV=dev webpack --progress --watch --log-level=debug"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.0.0",
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/polyfill": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/register": "^7.0.0",
"babel": "^6.23.0",
"babel-loader": "^8.0.0",
"css-loader": "^1.0.0",
"node-sass": "^4.9.3",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.0",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0",
"webpack-command": "^0.4.1",
"webpack-dev-server": "^3.1.7"
},
"dependencies": {
"lodash": "^4.17.10"
}
}
Какую версию webpack вы используете? Если бы вы заставили его работать для производственной сборки, задали бы вы этот вопрос? (Я могу догадаться, почему прод не работает)
@ChrisR обновил мой вопрос с помощью package.json
Библиотека просмотра довольно велика, вам придется подождать, пока viewer3d..min.js
загрузится на вашу веб-страницу. В противном случае объект Autodesk
не будет создан в объекте window
вашей веб-страницы.
Я думаю, что он не был полностью загружен для страницы в вызовах AJAX, вы можете проверить, является ли объект Autodesk
атрибутом window
, например, для пример на странице содержимого вкладки:
if ( typeof window.Autodesk === 'undefined' ) {
$.getScript( '<external JS>' );
}
Поскольку я вижу здесь только package.json
, я понятия не имею, как вы реализуете свое приложение и делаете предположение выше. Если это неверно, рассмотрите возможность поделиться более подробной информацией без конфиденциальных частей или отправьте неконфиденциальный воспроизводимый футляр на forge.help [at] autodesk.com
.
Спасибо @Eason. Да, я использовал typeof
с циклом setTimeout
, чтобы дождаться константы Autodesk, и это сработало. В любом случае, было бы здорово, если бы вы могли опубликовать код как модуль, который облегчил бы нашу жизнь;)
В вашем webpack.config.js
настройте UglifyJsPlugin следующим образом:
plugins: [
new UglifyJsPlugin({
uglifyOptions: {
mangle: {
keep_classnames: true
}
}
})
]
Это сообщит UglifyJsPlugin в Webpack, чтобы избежать изменения имен классов, поэтому вы сможете ссылаться на Autodesk
.
Не уверен, почему вы получаете эту ошибку. То, что вы описываете, должно работать нормально: jsfiddle.net/qLzvsyk5/2