Question

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

我尝试过的事情：

将相关的js / css文件手动复制到www文件夹中，然后使用index.html中的普通<script>和<link>元素引用它们。（我主要是这个工作，但看起来非常笨重）
将它们导入我的app.module.ts和/或我的自定义component.ts文件，例如 import 'chart.js/dist/Chart.bundle.min.js'; （这种工作，但我得到的错误是底层脚本找不到jQuery，所以我仍然需要在index.html中手动包含jQuery，如上所述）

当然有更好的方法吗？

Answer 1

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

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

假设您已经使用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"
},

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

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

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

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

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

希望有所帮助！： - ）

如何在ionic 2中包含node_modules的javascript + css？

1 个答案: