[Schematics] 0. Schematics "Hello World"

1. Install schematics cli:

npm i -g @angular-devkit/schematics-cli@latest

2. Then run schematics to create a new blank project:

schematics blank --name=my-component

It creates folder with number of files for you.

CREATE /my-component/README.md (639 bytes)

CREATE /my-component/package.json (539 bytes)

CREATE /my-component/tsconfig.json (656 bytes)

CREATE /my-component/.gitignore (191 bytes)

CREATE /my-component/.npmignore (64 bytes)

CREATE /my-component/src/collection.json (231 bytes)

CREATE /my-component/src/my-component/index.ts (318 bytes)

CREATE /my-component/src/my-component/index_spec.ts (474 bytes)

3. One important thing to do now, open .npmignore, remove line:

*.ts

It is because when you do `npm pack` to publish your schematics, it will remove all ts files, which is not what we want.

4. src/collection.json:

{

  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",

  "schematics": {

    "my-component": {

      "description": "A blank schematic.",

      "factory": "./my-component/index#myComponent"

    }

  }

}

The highlighted part, is the name of your schematics. Run the following command from the my-component directory.

schematics .:my-component

By default schematics run in staging mode, which means it won't generate any files for you. Instaed you can run:

schematics .:my-component --dry-run=false

5. Let’s do something slightly more interesting than making sure it runs and create a hello.ts file. Modify my-component/index.ts to have a tree.create() command.

import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';

export function myComponent(_options: any): Rule {

  return (tree: Tree, _context: SchematicContext) => {

    tree.create('hello.ts', 'console.log("Hello, World")');

    return tree;

  };

}

describe('my-component', () => {

  it('works', () => {

    const runner = new SchematicTestRunner('schematics', collectionPath);

    const tree = runner.runSchematic('my-component', {}, Tree.empty());

    expect(tree.files).toEqual(['/hello.ts']);

  });

});

巴特西

[Schematics] 0. Schematics "Hello World"

最新文章

热门文章