angular 4、全局导入外部javascript

Question

我知道以前有人问过这个问题，但是在搜索和尝试了很多东西之后，我不得不问。

我正在使用Angular Starter 包并尝试导入external javascript library

像这样直接将它导入到我的组件中没有问题

import * as loadImage from 'blueimp-load-image/js/index.js';

但据我所知，我应该在 zone.js 之前导入外部脚本（使用异步操作），否则可能会导致更改检测出现问题。 事实上，这正是我在 iOS 中使用 Safari 时遇到的问题。目前我必须手动调用更改检测。

在 angular starter 包中，polyfills.ts 文件中需要 zone.js，该文件由 webpack 作为 chunk/js 文件添加。

import 'blueimp-javascript-to-blob-for-angular';
//how to import so it's useable in any component?
import 'blueimp-load-image/js/index';
import 'core-js/es6';
import 'core-js/es6/set';
import 'core-js/es7/reflect';

require('zone.js/dist/zone');

if ('production' !== ENV) {
    Error['stackTraceLimit'] = Infinity;
    require('zone.js/dist/long-stack-trace-zone');
}

如何以及在哪里可以在 zone.js 之前导入我的外部 javascript 文件（以下内容），以便我仍然可以在我的组件中使用它？

到目前为止，我的问题是我无法访问外部库函数，因为它们总是undefined。但它们已被添加到生成的 javascript 文件中。

将外部javascript导入angular 4项目的整个过程对我来说似乎很复杂。

Javascript 文件内容：

module.exports = require('./load-image')

require('./load-image-scale')
require('./load-image-meta')
require('./load-image-fetch')
require('./load-image-exif')
require('./load-image-exif-map')
require('./load-image-orientation')

Answer 1

如果您使用的是AddAssetHtmlPlugin，如图所示here

  /**
   * Plugin: AddAssetHtmlPlugin
   * Description: Adds the given JS or CSS file to the files
   * Webpack knows about, and put it into the list of assets
   * html-webpack-plugin injects into the generated html.
   *
   * See: https://github.com/SimenB/add-asset-html-webpack-plugin
   */
  // new AddAssetHtmlPlugin([
  //   { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('polyfills')}`) },
  //   { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('vendor')}`) }
  // ]),

您需要创建另一个 entry 点 here，这将需要外部 js 文件并在其他捆绑包之前使用 AddAssetHtmlPlugin 插件加载。

Answer 2

在 index.html 文件的 head 部分中导入外部 javascript 文件，该部分是应用程序的入口点，使用普通的 html 脚本标签 示例：

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>