如何在離子2中包含來自node_modules的javascript + css？

我需要在我的離子2應用程序中包含fullcalendar和chart.js。（ionic 2 RC.3）我已經使用npm來安裝相關模塊，腳本位於我的node_modules文件夾中。
如何正確包含node_modules文件夾中的腳本/ css到我的應用程序中？如何在離子2中包含來自node_modules的javascript + 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）

當然有更好的方法嗎？

來源

2016-12-03 randbrown

我相信這是我見過的最乾淨的方式。

我們基本上會重寫離子構建腳本的複製部分。他們已經創建了構建腳本來鼓勵並簡化它。

假設你已經使用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被告知這件事，所以這種「配置」部分添加到您的/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處理，我們的腳本擴展負責處理所有其他事情。:-)

希望有幫助！ :-)

來源

2016-12-11 00:38:52 GoinAum

感謝您的解決方案。它的工作，有點。但是，由於我在package.json中添加了「ionic_copy」，因此我的Ionic 2項目的實時重新加載功能停止工作。假設我在項目目錄中修改了一個.ts文件並保存了它，實時重新加載應該自動刷新工作項目，但現在它不會。有什麼建議麼？ – filipvkovic

謝謝你的解決方案，這對我有很大的幫助。 – lightstalker89

這個建議很棒！但是，如果您不想將標記添加到索引文件，請改用ts文件中的import語句和sass文件中的@import語句。覆蓋copy.config.js要求您也重寫watch.config.js文件，以便實時重新加載。只需複製@ ionic/app-scripts/config中的原始配置並將require（）命令指向相對的node_modules位置即可。乾杯 – 4UmNinja

如何在離子2中包含來自node_modules的javascript + css？

回答

相關問題