إنشاء أحدث مكتبة التكنولوجيا

مرحبا يا هبر. يتناول هذا المقال كيفية كتابة Hello world باستخدام أحدث التقنيات.

في النهاية ، نحصل على مكتبة hello world والتي:

• يستخدم الطباع
• يعتني codestyle
• يولد قفص الاتهام
• يجري الاختبارات

البدء بدأ

في المجلد الجديد ، ابدأ git و npm

git init npm init 

عند إعداد npm

  package name: (bestlibever) version: (1.0.0) 0.1.0 description: Best lib forever entry point: (index.js) test command: jest git repository: keywords: author: >MAX_ (maximmasterr) license: (ISC) MIT 

هيكل المشروع

سيكون للمشروع الدلائل التالية:

• src - هنا ستكون ملفات المكتبة نفسها (typescript)
• lib - هنا tsc سوف يضع الملفات المترجمة من src
• اختبار - وهنا الاختبارات
• أمثلة - أمثلة الاستخدام

تحتاج أيضًا إلى الإضافة إلى .gitignore :

 lib/ node_modules/ 

نسخة مطبوعة على الآلة الكاتبة

الآن تثبيت وتكوين typescript:

 npm i typescript -D 

وإنشاء ملف يسمى tsconifg.json

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

الآن لنجعل الملف الرئيسي يرقد src/index.ts

 export function helloWorld(){ return 'Hello world!' } 

أضف أيضًا نصوصًا إلى package.json :

  "build": "tsc", "dev": "tsc --watch" 

الآن يمكننا تشغيل بناء لمرة واحدة باستخدام:

 npm run build 

وقابلة لإعادة الاستخدام:

 npm run dev 

Codestyle

لاختبار نمط الشفرة ، سنستخدم tslint والأجمل ، بالإضافة إلى تشغيل هذا قبل الالتزام.
تثبيت tslint ، أجمل ، أجش:

 npm i tslint tslint-config-prettier prettier husky -D 

تكوين أجمل من خلال إنشاء ملف .prettierrc مع المحتويات

 { "printWidth": 120, "trailingComma": "none", "singleQuote": true } 

إضافة برنامج نصي لتشغيل أجمل

  "prettier": "npx prettier --write src/* test/* example/*" 

قم بتكوين tslint عن طريق إنشاء ملف tslint.json مع المحتويات

 { "extends": ["tslint:recommended", "tslint-config-prettier"], "rules": { "curly": false, "ordered-imports": false, "interface-name": [true, "never-prefix"] } } 

أضف البرنامج النصي tslint والكودستايل:

  "tslint": "tslint -p tslint -p tsconfig.json", "codestyle": "npm run prettier && npm run tslint" 

الآن لنجعل تشغيل الكودستايل قبل الالتزام وإضافة إلى package.json :

 "husky": { "hooks": { "pre-commit": "npm run codestyle" } } 

الوثائق

لإنشاء صفحات الويب من md ، نستخدم docsify ولإنشاء الوثائق من api tsdoc

تثبيتها

 npm i docsify-cli typedoc -D 

في مجلد المستندات ، أنشئ README.md :

 # Best lib ever Best lib ever `helloWorld` return `'hello world'` ## Example ``js const a = require('') console.log(a.helloWorld()) // prints 'Hello world!' `` 

أضف المزيد أيضًا
المصدر يكمن هنا

التالي القيام به

 npx docsify init ./docs 

قم بإعداد الشريط الجانبي في docsify عن طريق إنشاء ملف sidebar.md

 # Best lib ever * [Best lib ever](/) * [More examples](/moreExamples) 

الآن ، لرؤية كل هذا الجمال ، أضف سيناريو

 "docsify": "docsify serve ./docs" 

والركض

 npm run docsify 

الآن لنأخذ وثائق طريقة ثابتة
أولاً ، أضف وصفًا للوظيفة في الكود:

 /** * Returns `Hello world!` */ 

في .gitinore أضف docs/api

إضافة البرنامج النصي ل typedoc

 "typedoc": "typedoc --out ./docs/api ./src --mode file --readme docs/README.md" 

أخيرًا ، أضف البرنامج النصي النهائي للإرساء

 "docs": "npm run typedoc && npm run docsify" 

كل شيء يكفي الآن لعرض الأرصفة

 npm run docs 

اختبارات

تثبيت المزاح

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

لنقم بإنشاء التكوين jest.config.js

 module.exports = { roots: ['/src'], transform: { '^.+\\.tsx?$': 'ts-jest', }, testRegex: '(/__test__/.*|(\\.|/)(test|spec))\\.tsx?$', moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], } 

إنشاء اختبار ( test/index.ts ):

 import { helloWorld } from "../src"; test('Should return helloWorld', () => { expect(helloWorld()).toBe('Hello world!') }) 

والآن يمكنك إجراء الاختبارات على

 npm test 

نحن التعميم

الآن نستطيع

 npm run build #   npm run dev #    npm run codestyle #    npm run docs #   npm test #   

مستودع جيثب النهائي