时间戳

首页 > 解决方案 > Webpack：如何在页面加载时加载模块？

webpack - 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

我的问题是：如何以在页面加载后对其进行评估的方式构建此扩展程序？

Obs：它在使用 webpack dev 构建时有效，但不适用于生产构建。

编辑：它适用于我在主页上加载 JS 文件。当库在 AJAX 请求中加载时会发生此问题（特别是我在Bootstrap 选项卡中使用它）

包.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"
  }
}

标签： webpackecmascript-6autodesk-forgees6-modules

解决方案

查看器库非常大，您必须等待它viewer3d..min.js已加载到您的网页中。否则，该Autodesk对象将不会在window您的网页对象中创建。

我认为它尚未在 AJAX 调用中为页面完全加载，您可以验证对象是否是这样Autodesk的属性，例如在选项卡内容页面中：window

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

由于我只看到package.json这里，我不知道您如何实现您的应用程序并做出上述假设。如果不正确，请考虑在不包含机密部分的情况下分享更多详细信息，或将非机密可复制案例发送至forge.help [at] autodesk.com

推荐阅读