如何在ionic 2中包含node_modules的javascript + css？ [英] How do I include javascript+css from node_modules in ionic 2?

问题描述

我需要在我的离子2应用程序中包含fullcalendar和chart.js。 （离子2 RC.3）
我用npm来安装相关的模块，脚本在我的node_modules文件夹中。

如何正确地包含node_modules文件夹中的scripts / css进入我的应用程序？

I need to include fullcalendar and chart.js within my ionic 2 app. (ionic 2 RC.3) I have used npm to install the relevant modules, and the scripts are within my node_modules folder.
How do I properly include the scripts/css from the node_modules folder into my app?

我尝试过的事情：

• 手动复制相关的js / css文件进入www文件夹，
  用正常的< script> 和< link> 元素。
（我主要是这个工作，但看起来非常笨重）


• 将它们导入我的app.module.ts和/或我的自定义component.ts文件，例如
  import'chart.js / dist / Chart.bundle.min.js';
  （这种作品，但我收到的错误是底层脚本找不到jQuery，所以我仍然必须手动在index.html中包含jQuery，如上所述）

• Manually copy the relevant js/css files into the www folder, and references them with normal <script> and <link> elements in the index.html. (I mostly got this to work, but it seems terribly clunky)
• import them in my app.module.ts and/or my custom component.ts files, such as import 'chart.js/dist/Chart.bundle.min.js'; (this sort of works, but I get errors that the underlying scripts can't find jQuery, so I still have to include jQuery in the index.html manually as above)

当然有更好的方法？

推荐答案

我相信这是我见过的最干净的方式。

I believe this is the cleanest way I've seen it done.

我们基本上会覆盖离子构建脚本的副本部分。他们已经创建了构建脚本来鼓励这一点，并使其变得简单。

We're essentially going to override the copy portion of the ionic build script. They've created the build script to encourage this and make it simple.

假设你已经使用npm来安装你需要的任何库：

Assuming you've already used npm to install whatever library you need:

npm install chart.js --save

（将chart.js库安装到项目根目录中的node_packages文件夹中）

(which installs the chart.js library into the node_packages folder in the root of the project)

查看 / node_modules / @ ionic /应用程序的脚本/配置/ copy.config.js 即可。这是我们重写的内容，因此将其内容复制到 /config/copy.config.js 中的文件（您需要创建/ config文件夹）。

Look at /node_modules/@ionic/app-scripts/config/copy.config.js. This is what we are overriding, so copy it's contents to a file at /config/copy.config.js (You'll need to create the /config folder).

module.exports = {
  include: [
    {
      src: '{{SRC}}/assets/',
      dest: '{{WWW}}/assets/'
    },
    {
      src: '{{SRC}}/index.html',
      dest: '{{WWW}}/index.html'
    },
    {
      src: '{{SRC}}/manifest.json',
      dest: '{{WWW}}/manifest.json'
    },
    {
      src: '{{SRC}}/service-worker.js',
      dest: '{{WWW}}/service-worker.js'
    },
    {
      src: 'node_modules/ionic-angular/polyfills/polyfills.js',
      dest: '{{BUILD}}/polyfills.js'
    },
    {
      src: 'node_modules/ionicons/dist/fonts/',
      dest: '{{WWW}}/assets/fonts/'
    },
    {
      src: './node_modules/chart.js/dist/Chart.bundle.min.js',
      dest: '{{BUILD}}/Chart.bundle.min.js'
    },
  ]
};

最后一部分是我们添加的部分，将chart.js文件复制到某个地方实际上被拉入构建。

The last section was the one we added on, to copy the chart.js file to somewhere that will actually get pulled into the build.

要使用我们的脚本，需要告诉package.json，所以将这个config部分添加到你的/ package中.json文件：

To get our script be used, package.json needs to be told about it, so add this "config" section to your /package.json file:

"config": {
    "ionic_copy": "./config/copy.config.js"
},

现在，当您构建时，文件将被复制，并且它是第一个完成后显然更容易，添加更多。您可以覆盖离子构建过程的其他部分，值得查看。

Now when you build, the file will be copied, and it's obviously easier after the first one is done, to add more. There are other portions of the ionic build process you can override as well, it's worth looking in to.

https://ionicframework.com/docs/v2/resources/app-scripts/

现在你可以轻松调用它，一个选项在index.html内：

Now you can call it in easily, one option is inside of index.html:

<script src="build/Chart.bundle.min.js"></script>

如果您安装模块更新，更改的文件将在您的构建中更新，并且此外，一切都可以通过vcs和设置新环境轻松完成，因为依赖项由npm处理，我们的脚本扩展可以处理其他所有事情。 ： - ）

The benefits are, if you install a module update, changed files will get updated in your build, and also, everything works out easily with vcs and setting up new environments, as the dependencies are handled by npm, and our script extension takes care of everything else. :-)

希望有所帮助！ ： - ）

Hope that helps! :-)

这篇关于如何在ionic 2中包含node_modules的javascript + css？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！