ionic2 - 如何在 ionic 2 中包含来自 node_modules 的 javascript+css？

Question

我需要在我的 ionic 2 应用程序中包含 fullcalendar 和 chart.js。 ( ionic 2 RC.3)
我使用 npm 安装了相关模块，脚本在我的 node_modules 文件夹中。
如何正确地将 node_modules 文件夹中的脚本/css 包含到我的应用程序中？

我尝试过的事情:

手动将相关的 js/css 文件复制到 www 文件夹中，然后
用正常的 <script> 引用它们和 <link> index.html 中的元素。
(我主要是让它工作，但它看起来非常笨重)

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

肯定有更好的方法吗？

Answer 1

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

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

假设您已经使用 npm 安装了您需要的任何库:

npm install chart.js --save

(它将 chart.js 库安装到项目根目录的 node_packages 文件夹中)

看/node_modules/@ionic/app-scripts/config/copy.config.js .这就是我们要覆盖的内容，因此将其内容复制到位于 的文件中/config/copy.config.js (您需要创建/config 文件夹)。

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 文件复制到实际会被拉入构建的某个位置。

要使用我们的脚本，需要告知 package.json，因此将这个“config”部分添加到您的/package.json 文件中:

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

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

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

现在您可以轻松地调用它，一个选项在 index.html 中:

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

好处是，如果您安装了模块更新，更改的文件将在您的构建中得到更新，而且，一切都可以通过 vcs 轻松完成并设置新环境，因为依赖项由 npm 处理，并且我们的脚本扩展负责其他一切。 :-)

希望有帮助! :-)