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语句告诉系统它可以从名为AgGridNg2和GridOptions的模块中获取ag-grid-ng2/main和ag-grid/main个组件。模块名称（AKA模块ID）通常与没有扩展名的文件名相同。

然后ionic-gulp-browserify-typescript transile 和捆绑这些来源以及您在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">

Ionic2：如何打包包括css在内的外部模块？

1 个答案: