javascript - 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时找不到这些。网格确实需要它们，因为在我包含它们之前不会显示，我通过将它们添加到构建文件夹下的临时文件夹中并链接到那里来完成，在这个阶段网格然后正确显示。 p>

所以想知道如何打包它们(css 也最终出现在 app.bundle.js 中)，然后然后引用它们吗？

提前感谢您的指点。

Answer 1

My first question is how does this get here?

就像你说的，

import 语句告诉系统它可以从名为 ag-grid-ng2 的模块获取 AgGridNg2 和 GridOptions 组件/main 和 ag-grid/main。模块名称(又名模块 ID)通常与文件名相同，但不带扩展名。

那么ionic-gulp-browserify-typescript 转译和捆绑源代码，这就是为什么您可以在 app.bundle.js 中看到它们。

The next question is how to package the css files?

我真的不知道是否有官方方法可以做到这一点，但我更喜欢通过在我的 /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">