Ionic2：如何打包外部模塊，包括css？

Question

我剛剛學習Ionic2，並試圖包含第一個外部模塊，在這種情況下爲Ag-Grid。

依照指示操作，here，我已經安裝了節點包，所以我在我的package.json

"ag-grid": "^4.2.7", 
"ag-grid-ng2": "^4.2.2", 

我已經導入到測試的.ts文件，包括指令以下..

... 
import {AgGridNg2} from 'ag-grid-ng2/main' 
import {GridOptions} from 'ag-grid/main' 

@Component({ 
    directives: [AgGridNg2], 
    templateUrl: 'build/pages/aggrid-page/aggrid-page.html' 
}) 
export class AgGridPage { 
    public data: Array<GridRow>; 
    public columnDefs; 
    public gridOptions: any; 
    public showToolPanel; 
    ... 

這是我所做的一切，並以某種方式將AgGrid 確實出現在最終的app.bundle.js，例如，在app.bundle.js我看到

var AgGridNg2 = (function() { 
function AgGridNg2(elementDef) { 
    var _this = this; 
    this.elementDef = elementDef; 
    // not intended for user to interact with. so putting _ in so if user gets reference 
... 

以及許多其他AgGrid相關的東西。

我的第一個問題是這是怎麼回事？

我在主Ionic gulp文件中沒有看到任何對它的引用。 browserfy在看到我的ts文件中的引用之後添加它，如下所示？

.... 
import {AgGridNg2} from 'ag-grid-ng2/main' 
import {GridOptions} from 'ag-grid/main' 

@Component({ 
    directives: [AgGridNg2], 
    templateUrl: 'build/pages/aggrid-page/aggrid-page.html' 
}) 
... 

接下來的問題是如何打包css文件？

銀文件說，鏈接到文件..

<link href="node_modules/ag-grid/styles/ag-grid.css" rel="stylesheet" /> 
<link href="node_modules/ag-grid/styles/theme-fresh.css" rel="stylesheet" /> 

但這些，當我把它添加到index.html都沒有發現。網格確實需要它們，因爲直到我將它們包括在內之前它們纔會顯示，我通過將它們添加到構建文件夾下的臨時文件夾中並在那裏鏈接到它們，然後在該階段正確顯示網格。

所以想知道如何打包它們（css是否也以app.bundle.js結尾），然後然後引用它們？

在此先感謝您的指點。

Answer 1

我的第一個問題是，這是如何到達這裏？

就像你說的，

的import語句告訴系統，它可以從一個名爲ag-grid-ng2/main和ag-grid/main模塊都AgGridNg2和GridOptions組件。模塊名稱（AKA模塊ID）通常與沒有擴展名的文件名相同。

所以後來ionic-gulp-browserify-typescripttranspile和束來源，這就是爲什麼你可以在app.bundle.js看到它們。

接下來的問題是如何打包css文件？

我真的不知道是否有這樣做的正式的方式，但我更喜歡在我的叫插件/app/theme文件夾中創建一個新的文件夾，然後添加一個新的文件，爲每個插件做與.scss擴展名，然後將它們包含在app.core.scss中。

它的工作方式與我們在上一個問題中看到的非常相似。在你gulpfile.js，你會看到一個名爲SASS當任何.scss改變時執行任務：

gulpWatch('app/**/*.scss', function(){ gulp.start('sass'); }); 

所以ionic-gulp-sass-build將編譯scss風格融css。

最後，你可以在你的/www/index.html該任務（所以你的編譯方式）被導入的結果可以看出：

<link ios-href="build/css/app.ios.css" rel="stylesheet"> 
<link md-href="build/css/app.md.css" rel="stylesheet"> 
<link wp-href="build/css/app.wp.css" rel="stylesheet">