角度4，全局导入外部javascript

我知道这个问题之前已经被问过了，但是在搜索并尝试了大量我不得不问的东西之后。角度4，全局导入外部javascript

我使用的是Angular Starter包和尝试导入external javascript library

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

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

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

在角度启动包中zone.js在名为polyfills.ts的文件中是必需的，该文件被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'); 
}

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

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

将外部javascript导入到angular 4项目中的整个过程对我来说似乎非常复杂。 JavaScript文件的

内容：在您的index.html文件的头部部分

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')

来源

2017-08-21 Arikael

你有没有机会尝试[我的解决方案]（https://stackoverflow.com/a/45793458/2545680）？ –

如果您使用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插件在其他软件包之前加载。

来源

2017-08-21 09:19:21

我刚试过。它的工作原理和添加必要的JS文件（只需要扩展SourceMaps）。但是，说实话，在我的书中，导入Js文件的东西不应该很难（我花了几个小时尝试不同的方法）。尽管这种方法有效，但我认为这并不理想。无论如何，谢谢。但是webpack现在在导入的文件的第一行上抱怨'Uncaught ReferenceError：模块没有被定义'。 – Arikael

所以可能需要在浏览器能够理解的东西中传输这个ES6模块...... oh myyy ... – Arikael

@Arikael，究竟有什么难的？您正在使用构建工具，您应该使用它支持的方法。您需要一个新的入口点，因为ESM模块是静态的，并且在执行导入它们的模块之前执行。最后一个错误可能是一个单独的问题。如果Webpack配置正确，它会将'module'转换为它自己的require格式 –

导入外部JavaScript文件，这是入口点到你的应用程序，使用普通的HTML脚本标签例如：

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

来源

2017-08-21 08:17:57

但这会导致一个额外的请求。 – Arikael

是的..但它会加载外部JavaScript文件只有一次，当index.html页面（即您的单页应用程序）加载到浏览器@Arikael –

是没有办法将其直接包含到应用程序（导入/ require等？） – Arikael

角度4，全局导入外部javascript

回答

相关问题