10ステップを使用して独自のserverlessプラグインを構築し始める.

私は、Serverlessで本当に楽しいものを構築するのを見つけました、そして、私自身のプラグインを構築しようとしているドキュメンテーションの表面をスキミングした後に、私はtypescriptを使って私の開発を始めたかったです.

ステップ1
あなたのNPMモジュールをセットアップして、Serverlessなプラグインを構築してください.

$ mkdir my-cool-plugin
$ cd my-cool-plugin
$ serverless create --template plugin
$ ls
index.js // <- What serverless made us.

ステップ2
npm initを実行してパッケージを取得します.JSON

$ npm init
# Whilst we're here, lets initialize git and add a .gitignore file and add node_modules to it.
$ git init
$ echo "node_modules" >> .gitignore

ステップ3
と一緒に依存関係として@types/node . 我々は、我々が我々を得るように、typescriptにinitすることができますtsconfig.json ファイル.

$ npm i typescript --save-dev
$ npm i @types/node --save-dev
$ node_modules/typescript/bin/tsc --init

ステップ4
加えるtsc スクリプトをビルドpackage.json .

{
  "scripts": {
    "build": "tsc ./src/index.ts"
  },
}

Good thing to note here is that scripts inside your package.json will look inside node_modules. That's why in step 3 I had to specify node_modules/typescript/bin/tsc when initialising.

ステップ5
クリエイトsrc 基本フォルダindex.ts ファイル.

$ mkdir src
$ echo "console.log('hello typescript')" >> src/index.ts

ステップ6 : (オプションで)
すべての作業をチェック!

$ npm run build
> [email protected] build /Users/karltaylor/code/my-cool-plugin
> tsc ./src/index.ts

今、あなたはindex.js インサイド・ユアsrc フォルダから通常のJavaScriptにコンパイルされているフォルダ.でもsrc ディレクトリは、正確に我々がそれを望む所でありません.

ステップ7
加えるrootDir and outDir 我々にtsconfig.json そして、我々の時計スクリプトpackage.json 保存時にファイルを再コンパイルする.
我々の中でtsconfig.json :

{
  "compilerOptions": {
    "rootDir": "./src"
    "outDir": "./dist",
  }
}

アンドpackage.json :

{
  "scripts": {
    "build": "tsc",
    "watch": "tsc -w"
  },
}

手順8 :
の内容をコピーしましょうindex.js ステップ1で作成されたときにServerlessindex.ts ファイル.
あなたは、我々が現在行って、修正する必要があるコンソールでたくさんのエラーで浸水されます.
今、残念ながら、多くの掘削の後、私はServerlessプラグインを構築するための特定のタイプを見つけることができませんでした.しかし、@ types/serverlessファイルがあります.すべてのエラーと戦うためにindex.ts 以下のようになります.

import Serverless from "serverless";

class ServerlessPlugin {
  serverless: Serverless;
  options: any;

  commands: {};
  hooks: { [key: string]: Function }

  constructor(serverless: Serverless, options: any) {
    this.serverless = serverless;
    this.options = options;

    this.commands = {
      welcome: {
        usage: "Helps you start your first Serverless plugin",
        lifecycleEvents: ["hello", "world"],
        options: {
          message: {
            usage:
              "Specify the message you want to deploy " +
              "(e.g. \"--message 'My Message'\" or \"-m 'My Message'\")",
            required: true,
            shortcut: "m",
          },
        },
      },
    };

    this.hooks = {
      "before:welcome:hello": this.beforeWelcome.bind(this),
      "welcome:hello": this.welcomeUser.bind(this),
      "welcome:world": this.displayHelloMessage.bind(this),
      "after:welcome:world": this.afterHelloWorld.bind(this),
    };
  }

  beforeWelcome() {
    this.serverless.cli.log("Hello from Serverless!");
  }

  welcomeUser() {
    this.serverless.cli.log("Your message:");
  }

  displayHelloMessage() {
    this.serverless.cli.log(`${this.options.message}`);
  }

  afterHelloWorld() {
    this.serverless.cli.log("Please come again!");
  }
}

module.exports = ServerlessPlugin;

走るyarn build コンソールで正常にビルドする必要がありますindex.ts セイルレスプラグインdist/index.js
ステップ9
新しいものを作ろうserverless 新しいディレクトリでプロジェクトします.

$ ~/code mkdir my-serverless-test-directory
$ ~/code cd my-serverless-test-directory
$ ~/code/my-serverless-test-directory npm init
$ ~/code/my-serverless-test-directory serverless create --template=hello-world

絶対パスまたは相対パスを参照するだけで、NPMモジュールをローカルにインストールしましょう.

$ ~/code/my-serverless-test-directory npm i --save-dev ~/code/my-cool-plugin

開放するserverless.yml ファイルとプラグインの名前をplugins セクション

# Welcome to serverless. Read the docs
# https://serverless.com/framework/docs/

# Serverless.yml is the configuration the CLI
# uses to deploy your code to your provider of choice

# The `service` block is the name of the service
service: my-serverless-test-directory

plugins:
  - my-cool-plugin # <------ Right here! 🚀

# The `provider` block defines where your service will be deployed
provider:
  name: aws
  runtime: nodejs12.x

# The `functions` block defines what code to deploy
functions:
  helloWorld:
    handler: handler.helloWorld
    # The `events` block defines how to trigger the handler.helloWorld code
    events:
      - http:
          path: hello-world
          method: get
          cors: true

ステップ10
我々のServerless BoilerPlateプラグインを走らせましょう.

$ ~/code/my-serverless-test-directory serverless welcome -m "Hello World Serverless Plugin in Typescript"
Serverless: Hello from Serverless!
Serverless: Your message:
Serverless: Hello World Serverless Plugin in Typescript
Serverless: Please come again!

とVoila!コンパイルされたtypescript serverlessプラグインが動作しています!
個人的に、私はServerlessなプラグインを構築するためのドキュメンテーションのはっきりした不足があるとわかりました、私は暗闇で非常に発展していて、何が何をするかを考え出しています、しかし、それは遊ぶのがとても楽しいです.
私はどこでより多くの技術関連の冒険についてつぶやきを感じる.