Ingénierie front-end: compréhension de la gestion des packages npm et publication d'un package sur npm

1. npmConnaissance du numéro de version du package

• 1. npmLa signification d' une version de package simple

  "moment": "^2.22.1"
  

• 2. Explication du numéro de version

  • major.minor.patch[-当前版本属于]
  • major: Version modifiée de manière subversive ( angular1-->angular2modifications similaires )
  • minor: Version itérative fonctionnelle
  • patch: bugVersion de correction simple
  • Le quatrième plus courant est
    • Alpha: Version bêta
    • Beta: Bêta publique
    • RC: Aperçu de la version avant la sortie de la version officielle

• 3. Plusieurs façons de verrouiller le package

  • ^Au début, la première version ne peut pas être modifiée
  • ~Au début, la deuxième version ne peut pas être modifiée
  • >=Quelle version est supérieure à

Deux, plusieurs méthodes de dépendance qui peuvent être utilisées dans le projet

• 1. Dépendance du projet dependencies[commun]
• 2. Dépendance au développement devDependencies[courant]
• 3, la même dépendance peerDependencies[telle bootstrapdépendance jquerymême]
• 4. Dépendances facultatives optionalDependencies[par exemple minireset.css]
• 5. Dépendances du packagebundleDependencies

Troisièmement, les étapes de base de la rédaction d'une boîte à outils

• 1. Initialisez le projet (notez que le nom du projet ne peut pas contenir de caractères spéciaux chinois)

  npm init --yes
  

• 2. Créez un bindossier sous le projet pour stocker le code

  #! /usr/bin/env node
  // 需要在shell窗口中能执行的文件,必须先申明使用申明环境的
  

• 3. package.jsonConfigurez les commandes dans

  "bin": {
        
        
    "mp": "./bin/mp.js"
  }
  

• 4. Créez un raccourci vers le npmpackage global de l'ordinateur

  npm link
  

• 5. linkLe résultat de l'exécution de la commande dans la fenêtre

• 6. Commandes pour l’emballage local temporaire

  npm pack
  

• 7. Installer directement là où le projet doit être installé

  npm install 目录/包名
  

Quatrièmement, npmla préparation avant de publier un paquet

• 1. Configurez le package.jsonfichier

  {
        
        
    "name": "", // 包名
    "version": "", // 版本号
    "description": "", // 简单的描素,告诉npm这个是做什么的
    "main": "lib/index.js", // 入口文件
    "scripts": {
        
         // 需要执行的脚本
      "build": "tsc"
    },
    "keywords": [ // 关键词,方便别人搜索到你的包
      
    ],
    "homepage": "", // 用于指定该模块的主页
    "repository": {
        
         // 用于指定模块的代码仓库
      "type": "git",
      "url": "https://github.com/xxx"
    },
    "author": "", // 作者邮箱,方便别人发邮件到你邮箱
    "license": "MIT", // 开源许可号
    "files": [ // 需要发布到npm上的文件夹,或者使用.npmignore类似.gitignore来忽视不需要发布的文件
      "dist",
      "lib",
      "es"
    ]
  }
  

• 2. Découvrez s'il existe un package du même nom

  • Allez simplement sur le npmjssite officiel pour rechercher

• 3. Méthode correcte pour modifier la version du numéro de version

Ne modifiez pas directement package.jsonla version du fichier manuellement. Vous ne pouvez pas en créer une si vous la modifiez manuellement tag. Utilisez la commande suivante pour modifier la version modifiée automatiquement et en créer une tag. Lorsque vous la soumettez à l' gitentrepôt, vous pouvez utiliser un instantané de l'actuel.tag

• npm version patch : Numéro de révision de la mise à niveau
• npm version minor : Mettre à jour le numéro de version mineure
• npm version major : Mettre à jour le numéro de version majeur

Cinq, publiez un package sur npmle

• 1. Utilisez pour nrmvérifier si la source miroir actuelle est npmjsofficielle

  nrm ls
  # or
  nrm current
  
  # 切换镜像源的方式
  nrm use 名称
  

• 2. Connexion et libération

  npm addUser
  npm publish
  # 删除远程仓库的一个包,删除后24小时候才可以发同名的包
  npm unpublish --force
  

6. Explication supplémentaire, maintenant de plus en plus de paquets doivent prendre en charge le tscode. Lors de la publication, vous pouvez essayer de l'utiliser tspour écrire

• 1. Le projet initial est le même que ci-dessus

• 2. Génération de commandestsconfig.json

  tsc --init 
  

• 3. tsconfig.jsonLe contenu du dossier

  {
        
        
    "compilerOptions": {
        
        
      /* Basic Options */
      "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
      "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
      "lib": ["es6"],                             /* 编译需要的库文件，例如你指定的 target 是 ES5，但是在代码中使用了 ES6 特性，就需要在 lib 中加上 ES6 */
      "declaration": true,                   /* 是否生成文件的声明文件 */
      "outDir": "./lib",                        /* 输出目录 */
      "strict": true,                           /* Enable all strict type-checking options. */
    },
    "include": ["./src/**/*"],
    "exclude": ["node_modules", "**/__tests__/*"]
  }
  

• 4. package.jsonConfigurez la commande de conversion x.d.tsdans le fichier, et le fichier sera automatiquement généré après la conversion

  "scripts": {
        
        
    "build": "tsc",
  },