# Typescript ile npm package olusturmak ve yayinlamak

## Typescript ile npm package olusturmak ve yayinlamak

![](https://i.imgur.com/XCUFIb9.png)

### Baslangic Kurulumu

Typescript ile npm paketi yayinlamak icin:

* Burada `scope` kullanici adimiz olacak, benim icin `yemreak`
* Package name ise `alfred5` olarak alindi kendi package name’inizi kullanmayi unutmayin

```javascript
npm init --scope @yemreak
```

```javascript
npm i -D typescript
```

* Eger `jest` ile test yapacaksaniz

```bash
	npm install -D jest ts-jest @types/jest
```

### Projenin Kurulmasi

![](https://i.imgur.com/QhdlKFj.png)

<details>

<summary>`package.json` ornegi</summary>

```javascript
{
	"name": "@yemreak/alfred5",
	"version": "0.1.0",
	"description": "Alfred5 workflow utility for typescript projects",
	"main": "out/index.js",
	"types": "out/index.d.ts",
	"scripts": {
		"build": "tsc",
		"test": "jest"
	},
	"keywords": [
		"alfred5",
		"alfred5-workflow"
	],
	"repository": {
		"type": "git",
		"url": "git+https://github.com/yemreak/alfred5"
	},
	"author": "yemreak",
	"license": "ISC",
	"devDependencies": {
		"@types/jest": "^29.5.12",
		"jest": "^29.7.0",
		"ts-jest": "^29.1.2",
		"typescript": "^5.4.5"
	}
}

```

</details>

<details>

<summary>`tsconfig` ornegi</summary>

\- \`out\` (\`dist\`) yerine secilmistir - \`decleration\` ile \`.d.ts\` yani \`typescript\` tip dosyalari tanimlanir

```javascript
{
	"include": ["src/**/*.ts"],
	"compilerOptions": {
		"outDir": "out",
		"target": "ESNext",
		"module": "CommonJS",
		"esModuleInterop": true,
		"strict": true,
		"sourceMap": true,
		"declaration": true,
		"forceConsistentCasingInFileNames": true
	},
	"exclude": ["node_modules", "out"]
}

```

</details>

<details>

<summary>`.gitignore`</summary>

\- GitHub ve git uzerinde gereksiz ve kisisel verileri gizlemek icin kullaniyoruz

```javascript
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Snowpack dependency directory (https://snowpack.dev/)
web_modules/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional stylelint cache
.stylelintcache

# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variable files
.env
.env.development.local
.env.test.local
.env.production.local
.env.local

# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache

# Next.js build output
.next
out

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# vuepress v2.x temp and cache directory
.temp
.cache

# Docusaurus cache and generated files
.docusaurus

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# TernJS port file
.tern-port

# Stores VSCode versions used for testing VSCode extensions
.vscode-test

# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*

```

</details>

<details>

<summary>`.npmignore`</summary>

\- Bu \`.gitignore\` icerisinde yer alan \`out\` dizinini \`npm\`'e yuklemek icin konur - Icini bos birakabiliriz, tek amacimiz \`.gitignore\`'un etkisini \`npm\` icin iptal etmek

</details>

<details>

<summary>`jest.config.js` ornegi (test olacaksa)</summary>

```javascript
/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
	preset: "ts-jest",
	silent: true,
	testEnvironment: "node",
	testMatch: ["**/*.test.ts"],
}

```

</details>

### Projenin Yayinlanmasi

<details>

<summary>Ilk olarak `npm` uzerine giris yapin</summary>

```javascript
npm login
```

</details>

<details>

<summary>Paketini yayinlamadan once `build` etmeyi unutmayin</summary>

\- \`package.json\` icerisinde \`scripts\` adi altinda \`build\` komutunuzu kontrol edin - Eger yoksa \`package.json\` ornek dosyama bakin

```javascript
npm run build
```

</details>

<details>

<summary>Gerekiyorsa `test` islemlerinizi de yapin</summary>

```javascript
npm run test
```

</details>

<details>

<summary>`publish` etmeden once localde test edin</summary>

```javascript
npm link
```

</details>

<details>

<summary>Herkese acik olarak `publish` etmek</summary>

```javascript
npm publish --access public
```

</details>

![](https://i.imgur.com/Sxgkzz7.png)

### Ornek Proje

[link\_preview](https://github.com/yemreak/alfred5)

## References

* ChatGPT

{% embed url="<https://pauloe-me.medium.com/typescript-npm-package-publishing-a-beginners-guide-40b95908e69c>" %}

{% embed url="<https://www.freecodecamp.org/news/how-to-create-and-publish-your-first-npm-package/>" %}

{% embed url="<https://www.youtube.com/watch?v=OlJEMhPGz6I>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.yemreak.com/arsiv/programming/typescript-ile-npm-package-olusturmak-ve-yayinlamak.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
