Webpack: Как загрузить модуль при загрузке страницы?

Используя 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"
  }
}

Не уверен, почему вы получаете эту ошибку. То, что вы описываете, должно работать нормально: jsfiddle.net/qLzvsyk5/2

CodingIntrigue 10.09.2018 13:54

Какую версию webpack вы используете? Если бы вы заставили его работать для производственной сборки, задали бы вы этот вопрос? (Я могу догадаться, почему прод не работает)

ChrisR 10.09.2018 14:12

@ChrisR обновил мой вопрос с помощью package.json

Rodrigo 10.09.2018 17:35
Поиск всех неиспользуемых файлов в проекте
Поиск всех неиспользуемых файлов в проекте
Количество файлов в проекте растет по мере его развития. И если быть по-настоящему честным, их продвижение происходит в геометрической прогрессии...
Настройка шаблона Metronic с помощью Webpack и Gulp
Настройка шаблона Metronic с помощью Webpack и Gulp
Я пишу эту статью, чтобы поделиться тем, как настроить макет Metronic с помощью Sass, поскольку Metronic предоставляет так много документации, и они...
0
3
459
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Библиотека просмотра довольно велика, вам придется подождать, пока 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, и это сработало. В любом случае, было бы здорово, если бы вы могли опубликовать код как модуль, который облегчил бы нашу жизнь;)

Rodrigo 11.09.2018 11:17

В вашем webpack.config.js настройте UglifyJsPlugin следующим образом:

plugins: [
  new UglifyJsPlugin({
    uglifyOptions: {
      mangle: {
        keep_classnames: true
      }
    }
  })
]

Это сообщит UglifyJsPlugin в Webpack, чтобы избежать изменения имен классов, поэтому вы сможете ссылаться на Autodesk.

Другие вопросы по теме