Как элегантно разработать npm-пакет машинописного языка в 2018 году?

внешний интерфейс JavaScript TypeScript NPM

Добро пожаловать в сообщество Tencent Cloud +, чтобы получить больше обширной технической практики Tencent по галантерее ~

Эта статья была опубликована Сяомин плюс

Много раз мы можем захотеть использовать язык typescript для создания некоторых модулей и отправки их в npm для использования другими,

Итак, в 2018 году какие шаги мне нужно сделать, если я хочу инициализировать такой модуль?:

ответ:Для создания элегантного, удобного для разработчиков модуля необходимо выполнить как минимум следующие 15 шагов.

  1. Инициализировать папку, инициализировать репозиторий git, инициализировать npm, инициализировать tsc
  2. Изменить конфигурацию tsconfig.js
  3. Добавьте npm-скрипты
  4. Добавьте правила кода проверки tslint и editorconfig, более красивый унифицированный стиль кода.
  5. Настройка хуков проверки для коммитов git
  6. начать писать код
  7. развитие режима просмотра
  8. Игнорировать папки, сгенерированные компиляцией ts
  9. Добавьте модульные тесты
  10. Напишите пример модульного теста
  11. Настройте несколько полезных скриптов npm
  12. Улучшить описание package.json
  13. Отправить код в репозиторий git
  14. Опубликуйте пакет вnpm

В этой статье я приведу подробные инструкции для каждого шага.

В реальной разработке, если каждый пакет проходит через эти шаги, кажется, что шагов слишком много. Поэтому, если вам действительно нужно создать проект, вы можете клонировать тот, который я предоставил.шаблонный проектЧтобы начать разработку нового модуля ts, основные шаги следующие:

git clone https://github.com/xiaomingplus/npm-typescript-boilerplate.git your-project-name
cd your-project-name
# 安装依赖
npm i
# 开始开发
npm start
# 修改 package.json 里面的项目名和简介
# 修改 README.md 文件内容
# 修改 远程仓库的地址
git remote set-url origin your-git-url

Ниже приведены общие шаги. В целях обучения рекомендуется выполнить следующие шаги:

1. Инициализировать папку, инициализировать npm, инициализировать tsc

mkdir project-name
cd project-name
# 初始化git项目
git init
# 添加gitignore文件
touch .gitignore
# 复制这个地址的ignore内容到.gitignore <https://github.com/github/gitignore/blob/master/Node.gitignore>

# 添加readme文件
echo "# My Awesome Typescript Project" >> README.md
# 安装typescript
npm install --save-dev typescript
# 初始化npm包
npm init --y
# 初始化tsconfig
tsc --init

2. Измените конфигурацию tsconfig.js.

Измените следующую конфигурацию по умолчанию:

{
    "compilerOptions": {
        "declaration": true,
        "outDir": "./lib",
     },
    "include": ["src"],
    "exclude": ["node_modules", "**/__tests__/*"]
}

Окончательная конфигурация tsconfig выглядит следующим образом:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "declaration": true,
        "strict": true,
        "outDir": "./lib",
        "esModuleInterop": true
    },
    "include": ["src"],
    "exclude": ["node_modules", "**/__tests__/*"]
}

3. Добавьте скрипт npm

Отредактируйте поле scripts в package.json:

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

4. Добавьте правила кода проверки tslint и editorconfig, более красивый унифицированный стиль кода.

npm install --save-dev prettier tslint tslint-config-prettier

новыйtslint.jsonдокумент

{
  "extends": ["tslint:recommended", "tslint-config-prettier"],
  "rules": {
    "no-console": false,
    "object-literal-sort-keys": false,
    "member-access": false,
    "ordered-imports": false
  },
  "linterOptions": {
    "exclude": ["**/*.json", "node_modules"]
  }
}

новый.prettierrcдокумент

{
  "trailingComma": "all",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true,
  "endOfLine": "lf",
  "printWidth": 120,
  "overrides": [
    {
      "files": ["*.md", "*.json", "*.yml", "*.yaml"],
      "options": {
        "tabWidth": 2
      }
    }
  ]
}

новый.editorconfig

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true
charset = utf-8
indent_style = space
indent_size = 4

[{*.json,*.md,*.yml,*.*rc}]
indent_style = space
indent_size = 2

Добавьте удобный скрипт скриптов:

{
  "scripts": {
    "format": "prettier --write \"src/**/*.ts\" \"src/**/*.js\"",
    "lint": "tslint -p tsconfig.json"
  }
}

5. Установите контрольный хук для коммитов git

Установите спецификацию контрольной суммы хука фиксации git

npm install --save-dev husky @commitlint/config-conventional @commitlint/cli commitizen cz-conventional-changelog

новыйcommitlint.config.jsдокумент

touch commitlint.config.js

записывать:

module.exports = {
  extends: ["@commitlint/config-conventional"]
};

новый.huskyrcдокумент

touch .huskyrc

записывать:

{
    "hooks": {
        "pre-commit": "npm run format && npm run lint && npm test",
        "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
}

Новый файл конфигурации:

touch .czrc

Написать конфигурацию:

{ "path": "cz-conventional-changelog" }

package.json добавляет конфигурацию скриптов:

{
  "scripts": {
    "commit": "git-cz"
  }
}

6. Начните писать код

cd project-name
mkdir src
cd src
touch index.ts

Запишите первую строку кода ts:

export const Greeter = (name: string) => `Hello ${name}`;

7. Развивайтесь в режиме часов

npm start

8. Игнорировать папку, созданную компиляцией ts

Пучок/libдобавить папку в.gitignore

/lib

9. Добавьте модульные тесты

npm install --save-dev jest ts-jest @types/jest

Создайтеjestconfig.jsonдокумент:

{
  "transform": {
    "^.+\\.(t|j)sx?$": "ts-jest"
  },
  "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
  "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"]
}

Исправлятьpackage.jsonтест по скриптам в:

{
  "scripts": {
    "test": "jest --config jestconfig.json"
  }
}

10. Напишите пример модульного теста

существуетsrcсоздать новую папку__tests__папку для хранения файлов тестового примера, создайте новуюGreeter.test.tsфайл, напишите:

import { Greeter } from "../index";
test("My Greeter", () => {
  expect(Greeter("Carl")).toBe("Hello Carl");
});

Запустите тестовый пример:

npm test

Результат должен быть передан.

11. Настройте несколько полезных скриптов npm

подготовить: выполнить перед выпуском и перед установкой пользователем

prepublishOnly: запускать перед публикацией

preversion: запустить перед созданием новой версии

версия: запустить после создания новой версии

postversion: запустить после создания новой версии

{
  "scripts": {
    "prepare": "npm run build",
    "prepublishOnly": "npm test && npm run lint",
    "preversion": "npm run lint",
    "version": "npm run format && git add -A src",
    "postversion": "git push && git push --tags"
  }
}

12. идеальное описание для package.json

nameПолное имя пакета, описание, файл записи пакетаmainполе, файл машинописного типаtypesопределение поля

{
    "name": "project-name"
    "description": "A nice greeter",
    "main": "lib/index.js",
    "types": "lib/index.d.ts"
}

13. Улучшите информацию о документе

новыйdocПапка, в которой вы можете написать подробную документацию по модулю:

mkdir doc

Полныйreadme.mdинформация, формат может относиться кздесь

14. Закоммитить код в репозиторий git

Отправьте код в репозиторий git после выпуска

git add .
git commit -m "feat: init"
# 关联到远程仓库不属于本教程的内容，就不写push了

15. Опубликуйте пакет вnpm

Если вы не зарегистрированы как пользователь npm, вам необходимо сначала зарегистрироваться.

npm adduser

После регистрации вы можете публиковать в npm:

# 自动修改package.json文件版本号+1
npm version patch
npm publish

После публикации вы можете перейти кwww.npmjs.com/найди свою сумку на

Ссылаться на

Step by step: Building and publishing an NPM Typescript package.

Эта статья была разрешена автором для публикации в сообществе Tencent Cloud + Для получения дополнительных оригинальных текстов, пожалуйстанажмите

Найдите и подпишитесь на общедоступную учетную запись «Сообщество Yunjia», получите технические галантереи как можно скорее и ответьте на 1024 после подписки, чтобы отправить вам подарочный пакет технических курсов!

Категории