简体繁体 English

Ionic3导入外部Web托管的JavaScript库

[英]Ionic3 import external web hosted javascript library

原文 2017-10-04 02:07:10 9 2 javascript/ angular/ import/ ionic3

I am trying to create a iOS/Android app based on a client side html5 web project, (ie a site) I did. 我正在尝试基于我做的客户端html5 Web项目（即网站）创建iOS / Android应用。 I thought Ionic would be the ideal choice, that it would help me to port my web application as soon as possible. 我认为Ionic将是理想的选择，它将帮助我尽快移植Web应用程序。 In my site, I would use the 'script src="https:// ..."' tag to load the external lib, then calling it in another script tag. 在我的站点中，我将使用'script src =“ https：// ...”'标记加载外部库，然后在另一个script标记中调用它。 However, I can't import and use it in Ionic3. 但是，我无法在Ionic3中导入和使用它。 I tried many solutions tagged with 'ionic2' and nothing really seems to work. 我尝试了许多标有“ ionic2”的解决方案，但似乎没有任何效果。 It also seems no one knows a general solution for this, since each answer was case-specific. 似乎也没有人知道一个通用的解决方案，因为每个答案都是特定于案例的。

Does anyone know a general way of importing external js file and using its objects and 'classes' in ionic3? 有谁知道导入外部js文件并在ionic3中使用其对象和“类”的一般方法？

(I would prefer to load from the web, but I am also accepting to download and load it fro file. ) （我希望从网络上加载，但是我也接受从文件下载并加载它。）

(If ionic isn't the best way of accomplishing my objective, I am open to suggestions) （如果离子不是实现我的目标的最佳方法，我愿意提出建议）

2 个解决方案

I think you need to wait till release the Ionic 4 and Stencil . 我认为您需要等到释放Ionic 4和Stencil 。

What is all about Ionic 4 and Stencil? Ionic 4和Stencil的全部内容是什么？

The magical, reusable web component generator. 神奇的，可重复使用的Web组件生成器。

Stencil is a tool for building modern Web Components 模板是用于构建现代Web组件的工具

Stencil combines some of the best features from traditional frameworks, but outputs 100% standards-compliant Custom Elements, part of the Web Component spec. Stencil结合了传统框架中的一些最佳功能，但是输出了100％符合标准的自定义元素，这是Web组件规范的一部分。

Stencil was created by the Ionic Framework team to build faster, more powerful mobile and web apps. Stencil由Ionic Framework团队创建，旨在构建更快，功能更强大的移动和Web应用程序。 Stencil is the foundation for the next generation of Ionic Framework, but is completely independent of Ionic or any other UI framework. Stencil是下一代Ionic Framework的基础，但完全独立于Ionic或任何其他UI框架。

Here you can see the official doc . 在这里您可以看到官方文档 。

Nice video about the power of Ionic 4 关于Ionic 4强大功能的精彩视频

Nice article about it 关于它的好文章

First of all have a look at this useful ionic resource , it explains how to add thirs party libraries using npm. 首先看一下这个有用的离子资源，它说明了如何使用npm添加第三方库。

If you cannot use npm because of whatever reason you have to put the source .js file into your assets/js folder and import it in your index.html using a <script> tag. 如果由于某种原因无法使用npm，则必须将源.js文件放入您的assets/js文件夹中，然后使用<script>标记将其导入到index.html 。 Then you have to tell typescript that your library exists. 然后，您必须告诉打字稿您的图书馆存在。 This is done like so: declar var <library-handle> . 这样做是这样的： declar var <library-handle> 。 Where <library-handle> can be an exported function/class if the library already uses ES2015 or the object which exposes the functions using prototype. 如果库已经使用ES2015或使用原型公开函数的对象，则<library-handle>可以是导出的函数/类。 This is the tricky part where you may have to try a few things until you get it to work. 这是棘手的部分，您可能必须尝试一些尝试，直到它起作用。

You can have a look at my answers here , here and here where I explained how to add different third party libraries to ionic projects. 您可以在这里，这里和这里查看我的答案，在这里我解释了如何向离子项目添加不同的第三方库。