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文件？

ag 文档说要链接到文件..

<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-typescript transpile 和 捆绑 源代码，这就是为什么您可以在您的 app.bundle.js 中看到它们。

接下来的问题是如何打包css文件？

我真的不知道是否有 官方的方法来做到这一点，但我更喜欢通过在我的 /app/theme 文件夹中创建一个名为 plugins 的新文件夹来做到这一点然后使用.scssextension为每个插件添加一个新文件，然后将它们包含在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">