How to make your own NPM package (Step-by-Step) 📦

Поділитися
Вставка
  • Опубліковано 31 січ 2025

КОМЕНТАРІ • 68

  • @DarlenCodename
    @DarlenCodename 10 місяців тому +29

    Awesome quality video.
    ✅ Perfect audio.
    ✅ Straight to the point.
    ✅ Showing best practices.
    Keep it up.

  • @ozzyfromspace
    @ozzyfromspace Місяць тому

    Nothing about this was under control. this whole video was on fire 🔥-- excellent job bro! I learned a lot here

  • @weroro
    @weroro Рік тому +14

    5:14 There is a CLI for that "npx tsc --init"
    15:30 Before publishing a new package, you should test it locally. Use the "npm pack" command to create a TGZ file and you can use it in the package.json file using the "npm install relative_path_to_package_file" command

    • @DarlenCodename
      @DarlenCodename 10 місяців тому +3

      You can use "npm link" to link the package globally, then in a new folder you use "npm link package-name" and it'll be linked to you node_modules

  • @TheFearlessStudios
    @TheFearlessStudios Рік тому +2

    I really appreciate this video as I’m gonna be making a discord game package and this helped me understand things I didn’t understand before keep up the great work

  • @jasonko1202
    @jasonko1202 Рік тому +1

    Best video I've watched on how to create npm package!!

  • @ZeroCommentsZeroDocs7Bugs
    @ZeroCommentsZeroDocs7Bugs 8 місяців тому

    From all the tutorials this was the one that got me to where I wanted to be! Thank you so much!

  • @priyanshushh
    @priyanshushh 10 місяців тому

    Thank you so much dude today i published my first ever package, this video helped me a lot.

  • @hghlndr2
    @hghlndr2 7 місяців тому

    Wow! What a good video!!! Best one for this subject, hands down.

  • @PlatinumBuckGorilla
    @PlatinumBuckGorilla 7 місяців тому +2

    Everyting on point. Very good tutorial.
    Saved me a lot of time. Been fluffing around with webpack and it’s plug-ins especially the ts-loader the bloody things are so out of sync.
    Spent countless hours trying to find compatible versions between the two.

  • @Cypekeh
    @Cypekeh 3 місяці тому +1

    Amazing bro. Subbed
    One thing tho, you often don't need to install packages globally, if you install them as a dev dependency you can use its binary inside that project via npx

  • @TheBenhichem
    @TheBenhichem 7 місяців тому

    nice, simple and straight forward

  • @v.demchenko
    @v.demchenko 6 місяців тому

    absolutely amazing video with great explanation every detail

  • @abdulsamadayoade9439
    @abdulsamadayoade9439 8 місяців тому

    thanks for making this, it fixed my problem

  • @nayandey5010
    @nayandey5010 Рік тому

    thanks to you, for my first npm package

  • @BooksWeCanRead
    @BooksWeCanRead Рік тому +1

    That’s so cool! Thanks so much that’s awesome! 👌

  • @PRABHAKARNAYAK-s5v
    @PRABHAKARNAYAK-s5v 3 місяці тому

    Thank you for the clear explanation

  • @Perrynatufe9105
    @Perrynatufe9105 Рік тому

    Thanks so much This was really helpful for my SAAS

    • @UnderCtrl
      @UnderCtrl  Рік тому

      Glad to have been helpful. Good luck on your SaaS! :)

  • @douglasemsantos
    @douglasemsantos 10 місяців тому

    Excellent video! Thank you for that!

  • @XZivXL
    @XZivXL 11 місяців тому

    Life saver! Thank you for that

  • @zoeycvu
    @zoeycvu 11 місяців тому

    thank you for your best tutorial

  • @zenobiusztasak8604
    @zenobiusztasak8604 10 місяців тому +1

    How instead of this:
    import {Button, someFunction} form "my-package"
    have these separated like:
    import {Button} from "my-package/components"
    import {someFunction} from "my-package" or "my-package/functions"
    Thanks

  • @mariolazzari
    @mariolazzari 8 місяців тому

    amazing video: I was seaarching for a tsdx alternative and, thanks to your awesome job, I found it!

  • @antonhogstrom4085
    @antonhogstrom4085 Рік тому

    Great quality tutorials! 👌

  • @m1dev
    @m1dev Рік тому +1

    Great video! ❤🔥

  • @RabahTaib-mn4fs
    @RabahTaib-mn4fs 9 місяців тому

    Frist: (الحمد لله)
    Second: Thank you ♥

  • @WaveFlightSimulations
    @WaveFlightSimulations 4 місяці тому

    thanks for the video bro

  • @fereshteh2000
    @fereshteh2000 Місяць тому

    Thanks a lot!

  • @jjss6717
    @jjss6717 20 днів тому

    Can we use HTML And CSS together to build npm packages

  • @0looom
    @0looom Рік тому +1

    keep going!!!!!!!!!!!!!!!!!!!!

  • @qudratullahkhan4518
    @qudratullahkhan4518 7 місяців тому

    Very Informative video.
    I have a question, this package is for Node Js. But how can we create a Vanilla JavaScript library like moment.js?

  • @hidhayaths
    @hidhayaths 6 місяців тому

    Excellent! Can we do classes in ts with the same steps or do we need any other configs? Pls advise

    • @UnderCtrl
      @UnderCtrl  6 місяців тому

      You can use the same config for classes

  • @mrlectus
    @mrlectus 5 місяців тому

    Why do I have to install types in some package and some I don't have to, but they still have types?

  • @raheemmohamed-x9o
    @raheemmohamed-x9o 9 днів тому

    seems this tsup is not copying package.json file to final bundle dist, do you know why ?

    • @UnderCtrl
      @UnderCtrl  9 днів тому +1

      The package.json is supposed to be outside the dist directory and meant to be used by package managers/node to determine where your build is (commonly in dist)

  • @yoskokleng3658
    @yoskokleng3658 Місяць тому

    Can we create private with license key?

  • @rjwhite4424
    @rjwhite4424 9 місяців тому

    awesome video. How would you recommend testing the code before building and publishing?

    • @UnderCtrl
      @UnderCtrl  8 місяців тому

      You can use "npm link" to install this package locally in another project and test it out there. I found this great tutorial you might find helpful: dev.to/one-beyond/different-approaches-to-testing-your-own-packages-locally-npm-link-4hoj

  • @aboutreactnative4484
    @aboutreactnative4484 Рік тому

    Thanks for the tutorial I have made a npm package called log-glow

  • @maxpricefield7586
    @maxpricefield7586 Рік тому

    question: do we need to configure for both cjs and esm if I just want to make typescript libraries meant for nodeJS only?

    • @UnderCtrl
      @UnderCtrl  Рік тому +2

      Yes, it would be good practice to do so because some developers might use CommonJS with your library while others might use ESM. Configuring for both ensures that your library will be supported by both environments.

  • @yunwang1243
    @yunwang1243 11 місяців тому +3

    Why is it for CommonJS? It is outdated

  • @devgauravjatt
    @devgauravjatt Рік тому

    Great video 💯❤❤❤🎉🎉🎉🎉🎉

  • @anilsonix
    @anilsonix Рік тому

    Could also share how to build isomorphic packages and subpath exports 😊

  • @mayurghuge8846
    @mayurghuge8846 7 місяців тому

    Thank you.

  • @webdevelopmentguide4910
    @webdevelopmentguide4910 5 місяців тому

    Thankful

  • @tech-nomade
    @tech-nomade 8 місяців тому

    bro this is gold. subsicribed

  • @kasuutooheri
    @kasuutooheri Рік тому +1

    Podrias hacer un tutorial para embeds programados?):

  • @gayathri-8-i6s
    @gayathri-8-i6s 10 місяців тому

    as i am using next js, i dont have main. then how to do it?

  • @praweewongsa
    @praweewongsa 11 місяців тому

    good job

  • @jh_developer
    @jh_developer 9 місяців тому

    package npm adduser notworking?

    • @abdulsamadayoade9439
      @abdulsamadayoade9439 8 місяців тому

      don't add package, that is his folder name used in the tutorial, just type "npm add user"

  • @heruhailiuhuang533
    @heruhailiuhuang533 Рік тому

    how to build for diff env like and prod.

  • @ftntio
    @ftntio Рік тому

    Cool....

  • @reybecar8033
    @reybecar8033 10 місяців тому +1

    I’m so lost at the beginning

    • @kobbimensah547
      @kobbimensah547 7 місяців тому

      Don't worry things gets so complicated when you don't know to start from

    • @PlatinumBuckGorilla
      @PlatinumBuckGorilla 7 місяців тому

      Fairly easy tutorial considering you do minimal compared to if you were using webpack or rollup

    • @ehm-wg8pd
      @ehm-wg8pd 5 місяців тому

      if you are lost, chances are you are missing the prerequisite, developing npm library is advanced topic, you can learn javascript, typescript, module system, node, and get used with web development first (coz modern dev will give yoh insight to why npm library exist / can be helpful)

  • @FaresFakhouri
    @FaresFakhouri Рік тому +1

    How To Make Dashboard #Day 1

  • @vrajbhingradiya9867
    @vrajbhingradiya9867 17 днів тому

    guess what's my name
    ?

  • @sanjay-gf9pr
    @sanjay-gf9pr 7 місяців тому +1

    import {defineConfig} from 'tsup'
    export default defineConfig({
    format: ['cjs', 'esm'],
    entry: ['./src/index.ts'],
    dts: true,
    shims: true,
    skipNodeModulesBundle: true,
    clean: true,
    })
    and
    {
    "compilerOptions": {
    "target": "es2022",
    "module": "commonjs",
    "outDir": "dist",
    "declaration": true,
    "noEmit": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "moduleResolution": "Node",
    /* Type Checking */
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    },
    "include": ["src"],
    "exclude": ["node_modules"]
    }