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..

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

所以想知道如何打包它们（css 是否也会在 app.bundle.js 中结束），然后 然后引用它们？

在此先感谢您的指点。

Answer 1

My first question is how does this get here?

就像你说的，

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

然后 ionic-gulp-browserify-typescript transpile 和 bundle 来源，这就是为什么你可以在 app.bundle.js.

The next question is how to package the css files?

我真的不知道是否有官方方法可以做到这一点，但我更喜欢通过在我的 /app/theme 文件夹中创建一个名为 plugins 然后为每个插件添加一个扩展名为 .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的外部模块？

Ionic2: How to package external modules including the css?

javascript

angularjs

ionic-framework

ionic2

angular