Question

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

扩展统计信息的主要类别：

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已加载到您的网页中。否则，将不会在网页的Autodesk对象中创建window对象。

我认为AJAX调用中的页面尚未完全加载，您可以像这样在example中验证Autodesk对象是否是window的属性标签内容页面：

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

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

Answer 2

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

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

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

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

2 个答案: