Webpack: Как загрузить модуль при загрузке страницы? - PullRequest
Новая
       10

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

0 голосов
/ 10 сентября 2018

Используя веб-пакет, я создаю расширение библиотеки. Проблема в том, что библиотека должна быть загружена с [определенного сервера.]

Основной класс расширенных характеристик с: 

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, но не работает с производственной сборкой.

Редактировать: Работает, я загружаю файлы 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"
  }
}

Ответы [ 2 ]

0 голосов
/ 11 сентября 2018

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

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

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

0 голосов
/ 11 сентября 2018

Библиотека просмотра достаточно велика, вам придется ждать, пока viewer3d..min.js будет загружен на вашу веб-страницу. В противном случае объект Autodesk не будет создан в объекте window вашей веб-страницы.

Я думаю, что он не был полностью загружен для страницы в вызовах AJAX. Вы можете проверить, является ли объект Autodesk атрибутом window, как это делается для , пример на вкладке страница содержания: 

if( typeof window.Autodesk === 'undefined' ) {
    $.getScript( '<external JS>' );
}

Поскольку я вижу только package.json здесь, я понятия не имею, как вы реализуете свое приложение и делаете предположение выше. Если это неверно, рассмотрите возможность передачи более подробной информации без конфиденциальных частей или отправьте неконфиденциальное воспроизводимое дело на forge.help [at] autodesk.com

...