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

问题描述

我需要在我的 ionic 2 应用程序中包含 fullcalendar 和 chart.js.(离子 2 RC.3)我已经使用 npm 安装了相关模块，脚本在我的 node_modules 文件夹中.
如何正确地将 node_modules 文件夹中的脚本/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文件夹中，并使用 index.html 中的普通 <script> 和 <link> 元素引用它们.(我主要是让它工作，但它看起来非常笨重)
• 将它们导入我的 app.module.ts 和/或我的自定义 component.ts 文件中，例如导入'chart.js/dist/Chart.bundle.min.js';(这种工作，但我得到底层脚本找不到jQuery的错误，所以我仍然必须像上面那样手动将jQuery包含在index.html中)

• 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.

我们实际上将覆盖 ionic 构建脚本的复制部分.他们创建了构建脚本来鼓励这一点并使其变得简单.

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/app-scripts/config/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屋！