前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Angular 11 中 Schematics 的代码优化

Angular 11 中 Schematics 的代码优化

作者头像
叙帝利
发布2021-04-30 14:40:00
8240
发布2021-04-30 14:40:00
举报
文章被收录于专栏:前端新视界

前言

升级 Angular 11 已经是几个月之前的事情了,在升级 Angular 11 之后,schematics 有些函数的用法变了,直接运行会报错,花了两天时间纠正了部分 API。本文主要记录其中的一些变化。

函数优化

1、使用 async/await 获取工作空间

更新前

代码语言:javascript
复制
function addLoaderToIndex(options: Schema): (host: Tree) => Tree {
  return (host: Tree) => {
    const workspace = getWorkspace(host);
    const project = getProjectFromWorkspace(workspace, options.project);
    const projectIndexHtmlPath = getIndexHtmlPath(project);
    ...
  }
}

更新后

代码语言:javascript
复制
function addLoaderToIndex(options: Schema): Rule {
  return async (host: Tree) => {
    const workspace = await getWorkspace(host);
    const project = getProjectFromWorkspace(workspace, options.project);
    const projectIndexFiles = getProjectIndexFiles(project);
    ...
  }
}

更新 11 之后的 getWorkspace 方法使用了 await 关键字,暂时不清楚这样变化的原因。

2、 新增 updateWorkspace 方法

更新前

代码语言:javascript
复制
function addHmrToAngularJson() {
  return (host: Tree) => {
    const workspace = getWorkspace(host);
    const ngJson = Object.assign(workspace);
    const project = ngJson.projects[ngJson.defaultProject];

    // build
    project.architect.build.configurations.hmr = {
      fileReplacements: [
        {
          replace: `${project.sourceRoot}/environments/environment.ts`,
          with: `${project.sourceRoot}/environments/environment.hmr.ts`,
        },
      ],
    };
    // serve
    project.architect.serve.configurations.hmr = {
      hmr: true,
      browserTarget: `${workspace.defaultProject}:build:hmr`,
    };

    host.overwrite('angular.json', JSON.stringify(ngJson, null, 2));
  };
}

更新后

代码语言:javascript
复制
function addHmrToAngularJson(oprions: Schema) {
  return updateWorkspace(workspace => {
    const project = getProjectFromWorkspace(workspace);
    const targetBuildConfig = project.targets?.get('build')?.configurations as any;
    const targetServeConfig = project.targets?.get('serve')?.configurations as any;

    targetBuildConfig.hmr = {
      fileReplacements: [
        {
          replace: `${project.sourceRoot}/environments/environment.ts`,
          with: `${project.sourceRoot}/environments/environment.hmr.ts`,
        },
      ],
    };

    targetServeConfig.hmr = {
      hmr: true,
      browserTarget: `${oprions.project}:build:hmr`,
    };
  });
}

我个人觉得 updateWorkspace 方法很有意思,在上一个版本中如果想更新 json 文件,需要使用 host.overwrite 覆盖原文件。当前方法则使用了封装好的 updateWorkspace 方法。这个方法本身就是更新 angular.json

3、封装 chalk 的方法,不再需要直接引用

更新前

代码语言:javascript
复制
function addAnimationsModule(options: Schema) {
  return (host: Tree) => {
      ...
      if (hasNgModuleImport(host, appModulePath, noopAnimationsModuleName)) {
        return console.warn(
          chalk.red(
            `Could not set up "${chalk.bold(browserAnimationsModuleName)}" ` +
              `because "${chalk.bold(noopAnimationsModuleName)}" is already imported. Please ` +
              `manually set up browser animations.`
          )
        );
      }
      ...
  };
}

更新后

代码语言:javascript
复制
function addAnimationsModule(options: Schema) {
  return async (host: Tree, context: SchematicContext) => {
      if (hasNgModuleImport(host, appModulePath, noopAnimationsModuleName)) {
        context.logger.error(
          `Could not set up "${browserAnimationsModuleName}" ` +
            `because "${noopAnimationsModuleName}" is already imported.`
        );
        context.logger.info(`Please manually set up browser animations.`);
        return;
      }
  };
}

更新后版本已经不需要显式的引用 chalk 插件了,只需要使用封装好的 context.logger 即可。

4、projectType 的取值有变化

更新前

代码语言:javascript
复制
function buildDefaultPath(project: WorkspaceProject): string {
  const root = project.sourceRoot ? `/${project.sourceRoot}/` : `/${project.root}/src/`;
  const projectDirName = project.projectType === ProjectType.Application ? 'app' : 'lib';
  return `${root}${projectDirName}`;
}

更新后

代码语言:javascript
复制
function buildDefaultPath(project: ProjectDefinition): string {
  const root = project.sourceRoot ? `/${project.sourceRoot}/` : `/${project.root}/src/`;
  const projectDirName = project.extensions.projectType === ProjectType.Application ? 'app' : 'lib';
  return `${root}${projectDirName}`;
}

更新之后在使用 buildDefaultPath 这个方法的时候遇到一个错误,projectType 必须通过 project.extensions.projectType 才能获取。

总结

在升级 Angular 11 之后,除了上面提到的方法优化之外,还有一些方法的删减,总的来说, schematics 的代码变得更加简洁了。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-04-28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 函数优化
  • 总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档