# 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>" %}