Webpack：如何在页面加载时加载模块？

Question

我正在使用 webpack 创建一个库扩展。问题是库应该从[特定服务器]加载。

扩展统计的主要 class：

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 开发构建时有效，但不适用于生产构建。

编辑： 它在我加载主页上的 JS 文件时起作用。当在 AJAX 请求中加载库时会发生此问题（具体来说，我在 Bootstrap tab 中使用它）

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

Answer 1

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

我认为在 AJAX 调用中还没有完全加载页面，您可以像这样验证 Autodesk 对象是否是 window 的属性example 在选项卡内容页面中：

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

因为我在这里只看到package.json，所以我不知道你是如何实现你的应用程序并做出上述假设的。如果不正确，请考虑在没有机密部分的情况下分享更多详细信息，或将 none-机密的可重现案例发送至 forge.help [at] autodesk.com

Answer 2

在您的 webpack.config.js 中，像这样配置 UglifyJsPlugin：

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

这将告诉 Webpack 中的 UglifyJsPlugin 避免更改类名，因此您将能够引用 Autodesk。

Webpack：如何在页面加载时加载模块？

Webpack: How to load the module on page load?

ecmascript-6

webpack

autodesk-forge

es6-modules