仅包含我需要的来自 Angular Material 的模块答案

【问题标题】：Only include modules from Angular Material that I need仅包含我需要的来自 Angular Material 的模块
【发布时间】：2016-08-05 08:14:13
【问题描述】：

我正在使用来自 Angular Material 的模块 $mdDialog，但我不需要完整的库。是否可以只在项目中包含我需要的模块，我该怎么做？我已经用 Bower 安装了 Angular Material，并在我的项目中使用了 Gulp。

【问题讨论】：

我认为不可能。
那么有没有办法解决这个问题？当我只需要对话框模块时，当我使用 Angular Material 的完整安装时，我的项目非常慢。

标签： angularjs gulp bower angular-material

【解决方案1】：

很快 Angular Material 将变成 v1.1.0 作为主要版本。

作为补充，material-tools 存储库将被宣布。

Material Tools 允许开发人员使用最必要的组件构建自定义 Angular Material 构建。

它还可以构建预编译的主题样式表，从而显着提高性能。

Material Tools 已经可用，但仍处于测试阶段。

https://github.com/angular/material-tools

【讨论】：

【解决方案2】：

根据我上面的评论，$mdDialog 依赖于 angular-material.js，它依赖于 angular.js、angular-aria.js 和 angular-animate.js。我认为没有办法解决这个问题。

虽然您使用的是 Angular Material，但我想建议一个替代方案 - Polymer，它与 Angular Material 的风格相似且一致。此建议与您不想加载大量依赖项有关。

使用 Polymer 的优点是可以包含单独的元素，例如 paper-dialog - demo

来自docs

【讨论】：

【解决方案3】：

DevVersion 的答案可能比这个更最新

我的解决方案：

您只选择您想要的组件，通过从angular material git repository 进行自定义 angularjs 构建，如下所示

下载或克隆angular material repo。
进入存储库文件夹并执行“npm install”或“npm update”

用于自定义 js 构建

在“\gulp”文件夹中编辑util.js，更新buildJs()函数

    function buildJs () {
     // original code commented
     //var jsFiles = config.jsBaseFiles.concat([path.join(config.paths, '*.js')]);  
        
      var jsFiles = config.jsBaseFiles;
      
      //adding the paths of components you want
      jsFiles.push('src/components/icon/**/*.js');
      jsFiles.push('src/components/showHide/**/*.js');
      jsFiles.push('src/components/virtualRepeat/**/*.js');
      jsFiles.push('src/components/dialog/**/*.js');

运行“gulp build”并在“\dist”文件夹中找到js文件

我在 webpack 中使用 angularjs，我在我的应用程序中将“angular-material.js”复制到“\node_modules\angular-material”，并且无需任何更改即可构建。

用于构建自定义 css

在存储库的“\gulp\tasks”文件夹中编辑“build-scss.js”。编辑 getPaths() 函数

function getPaths () {
    var paths = config.scssBaseFiles.slice();
    if ( modules ) {
      paths.push.apply(paths, modules.split(',').map(function (module) {
        return 'src/components/' + module + '/*.scss';
      }));
    } else {
     // original code commented
     // paths.push('src/components/**/*.scss');
      paths.push('src/core/services/layout/**/*.scss');
       
       //add the paths of components you want     
        paths.push('src/components/icon/**/*.scss');
        paths.push('src/components/showHide/**/*.scss');
        paths.push('src/components/virtualRepeat/**/*.scss');
        paths.push('src/components/datepicker/**/*.scss');
        paths.push('src/components/autocomplete/**/*.scss');
        paths.push('src/components/backdrop/**/*.scss');
        paths.push('src/components/dialog/**/*.scss');

“gulp build”也会在“\dist”文件夹中构建css

希望对您有所帮助，如果 angular material gulp build 发生更改，请发表评论。

其他方式

当您使用 npm 安装 angularjs 时，您可以在 "\node_modules\angular-material\modules\js" 中找到每个组件的 js 和 css 文件，您可以使用自定义构建来连接它们。

【讨论】：