NPMパッケージの作成😉

8167 ワード
webdev npm codenewbie tutorial テキストリンク
こんにちは、ユーザー!👋
今日は、NPMパッケージの作成と公開方法を説明します.
私は最初のNPMパッケージのリリース後にこのチュートリアルを作成したいと思った🎉🥳, here .
あなたのNPMパッケージを作りましょう🙌.
🟣. アカウント作成
私は冗談ではない、あなたはNPMでアカウントを必要とし、ユーザーhereを登録します.
🟣. NPMのソースフォルダとパッケージを作成します.JSON
デスクトップに行って、新しいフォルダを作成してください.たとえば、NPMachyYournameRank Testの名前(または将来のパッケージの名前)です.
このフォルダを端末に開きます.まず第一に
npm init
その後、いくつかの質問が表示されます.
パッケージ名
// NAME OF YOUR PACKAGE
package name: (test)
パッケージ名を入力します.この例については、“NPMRANT DesireRank Test”を使用し、“test”や“test 1”などのようなものがおそらく使用されるので、特定の名前を使用します.結果は次のとおりです.
// NAME OF YOUR PACKAGE
package name: (test) npm_desire_test
パッケージのバージョン
デフォルトのバージョンを設定します.
// VERSION OF YOUR PACKAGE
version: (1.0.0) 1.0.0
パッケージの説明
パッケージの簡単な説明を作成します.
// DESCRIPTION OF YOUR PACKAGE
description: A test package for npm.
パッケージのエントリポイント
基本的に、あなたのスタイル/ロジックがどのファイルに置かれるかについて話しています.デフォルトではインデックスに設定されます.しかし、これは他のインデックスとの衝突を引き起こす可能性があります.ユーザーが独自のプロジェクトを持っているJS.
NPMを使用してロジックパッケージを作成した場合(JavaScript)、“js . extension”を使用してエントリポイントを作成します.例えば、utilount関数.js
NPMを使用してスタイルパッケージ(CSS、SASS、CSS、スタイラス)を作成する場合は、". scs "、". sass "、、. css "(など)拡張を使用してエントリポイントを作成します.例: myCardStyles.SCSS
この例ではテストをタイプします.js
// ENTRY POINT (WHERE YOUR CODE WILL BE)
entry point: (index.js) test.js
パッケージのテストコマンド
パッケージのテストコマンド.(私は実際にこれを使用しませんが、まあまあ).
// A COMMAND TEST
test command: test
プロジェクトのGit Repo
あなたのプロジェクトが保たれているGitレポのURL.
この例では、私は何も使用していないので、“none”と入力します.
// GIT REPO
git repository: none
キーワード
パッケージのキーワード.それらの間にカンマを使用します.
// YOUR KEYWORDS
keywords: your, keywords, for, the, package
パッケージの作者
あなたの名前または著者の名前.
// YOUR NAME
author: your name here
パッケージのライセンス
インターネットの周りにはたくさんのライセンスがあります.ライセンス242479152とSPDXコードをhereのライセンスを確認します.
例のためにランダムライセンスを選びます.
// SEARCH FOR A CORRECT SPDX LICENSE NAME
license: (ISC) CC-BY-ND-4.0
10 .結果の確認
初期化を終えた後に、コンソールはJSONであなたの答えを促します.すべてが正しいならば、進んでください.
🟣 エントリポイントの作成
あなたのエントリポイントを覚えていますか?あなたの論理/スタイルが置かれなければならないもの?
パッケージを作成したフォルダを開きます.Visual Studioまたはお気に入りのIDEでのNPMパッケージのJSON.
パッケージに書いたのと同じ名前のエントリポイント用のファイルを作成します.JSON
この例の場合はテストであった.js
内部で、コードやスタイルを作成します.
コード例
// test.js

function alertThis(){
    alert('Alert from my npm package')
}
スタイルの例
// test.css

.myOwnStyle {
    color: lightblue;
    font-weight: bold;
}
スタイルはsass/scssと同じですが、
// test.scss

.otherStyle {
    color: lightblue;
    font-weight: bold;
}
🟣 READMEの作成
重要です.
パッケージにはREADMEという名前のファイルが必要です.MDは、このReadMeはGithubのReadMeなどに似ています.あなたはMarkdownでそれを書くことができます.
READMEにはいくつかの基本があります.パッケージには何がありますか、あなたに関する情報、インストール方法、誰かのコードで設定する方法.
## What is this about? 🤔

Something!

## How to install this package?
...
一度あなたが必要なものを作成した、それはあなたのNPMパッケージを公開する時間です!🥳
🟣 NPMパッケージを公開する
最後に、それは光を見るための時間!
あなたのNPMパッケージのフォルダが開いているコンソールに戻りましょう.
まず第一に、あなたはコンソールを通してNPMにログインしなければなりません.
種類
npm login
それはあなたのユーザ名、パスワード、電子メールを要求し、一度NPMに接続していることをお知らせします.
今、時間です.コマンドを使用してパッケージを公開する
npm publish
エラーが発生した場合、
  • 多分、あなたは正しくログインしていないでしょう.コンソールを閉じて、ログインして、再びそれを公開しようとしてください.
  • お客様のパッケージ名はおそらくパッケージに入ります.そして、それを変えてください.
    • 🟣 それをインストールしてみてください
    今すぐあなたのパッケージをプロジェクトで使用する方法を設定する時間です.
    *あなたはそれを公開する前にテストすることもできます.
    新しいプロジェクトを(JSフレームワークの有無にかかわらず)作成し、パッケージを使用してインポートできるすべての方法を確認します.
    パッケージをどのように設定するか、パッケージの設定方法を理解することが重要です.
    ここではいくつかの例( JSフレームワークを使用していないプロジェクトについて)
    テストのインポート.js関数
    <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- MY PACKAGE IMPORTED AS A JS FILE 👇 -->
    <script src="node_modules/npm_desire_test/test.js"></script>
</head>
<body>

    <!-- MY PACKAGE FUNCTION INSIDE THE HTML 👇 -->
    <button onclick="alertThis()">alerta</button>

</body>
</html>
    テストのインポート.CSSスタイル
    <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- MY PACKAGE IMPORTED AS CSS 👇 -->
    <link rel="stylesheet" href="node_modules/npm_desire_test/test.css">
</head>
<body>

    <!-- MY CLASS IMPORTED USED IN AN H2 👇 -->
    <h2 class="myOwnStyle">
        Title affected by the styles in my npm
    </h2>

</body>
</html>
    あなたのパッケージがSASSまたはSCSSのようなプリプロセッサで作られるならば、それを準備して、走らせて、あなたのReadMeでそれを文書化する方法を試してみるようにしてください.MDの皆さん(そして自分自身のパッケージを使った最後の5ヶ月後のあなた自身)は、あなたのパッケージの使用について知っています.
    🟣 パッケージの新しいバージョンのアップロード
    パッケージを変更したり変更したりするときは、コンソールのフォルダを再度開き、NPM(コンソールでは前に)にログインしてコマンドを入力してください.
    npm version patch
    再度使用する前に
    npm publish
    パッケージの次/新規/改良/修正/etcバージョンをアップロードするには.
    🟣 パッケージの削除
    パッケージを削除したいなら、あなたの端末にパッケージフォルダを開き、ログインしてください
    npm unpublish
    それをあなたがそれを公表しないならば、使用
    npm unpublish --force
    代わりに.
    🟣 結論として
    それは今のところ!
    私は、これが役に立ちました、そして、あなたはあなた自身のNPMパッケージをつくって、テストして、発表することができました.🥳
    コーディングを続けましょう💻!
    here
    オーディオビデオ
    Auth Pageの実装