Rumah >hujung hadapan web >tutorial js >Artikel ini akan membantu anda memahami prinsip npm

Artikel ini akan membantu anda memahami prinsip npm

青灯夜游
青灯夜游ke hadapan
2022-08-09 09:23:023187semak imbas

npm ialah alat pengurusan pakej dunia JavaScript dan merupakan alat pengurusan pakej lalai untuk platform Node.js. Melalui npm, anda boleh memasang, berkongsi, mengedarkan kod dan mengurus kebergantungan projek. Artikel ini akan membawa anda melalui prinsip npm, saya harap ia akan membantu anda!

Artikel ini akan membantu anda memahami prinsip npm

Prinsip npm

npm dikatakan pengurus pakej terbesar di dunia Adakah sebabnya benar-benar mesra pengguna?

1. npm init

digunakan untuk memulakan fail package.json yang ringkas. Fail package.json digunakan untuk menentukan fail penerangan pakej.

1. Tingkah laku lalai npm init pelaksanaan

melaksanakan npm init --yes, semuanya menggunakan nilai lalai.

2. Tingkah laku npm init Tersuai Prinsip perintah

npm init ialah: panggil skrip dan keluarkan fail package.json yang dimulakan.

Dapatkan input pengguna menggunakan kaedah prompt().

2. Pemasangan pakej kebergantungan

Fungsi teras npm: pengurusan kebergantungan. Jalankan npm i untuk memasang pakej bergantung daripada dependencies dan devDependencies dalam package.json ke folder node_modules dalam direktori semasa.

2.1. Definisi pakej

npm i boleh memasang pakej. Biasanya pakej ialah nama pakej yang perlu kita pasang Di bawah konfigurasi lalai, npm akan mencari alamat pakej yang sepadan dengan nama pakej daripada sumber lalai (Registry), dan memuat turun dan memasangnya. Juga boleh menjadi laluan http url/git url/folder yang menunjuk kepada nama pakej yang sah.

Takrif pakej yang tepat ialah pakej jika ia memenuhi salah satu daripada syarat berikut a) hingga g):

Artikel ini akan membantu anda memahami prinsip npm

Takrif pakej yang tepat

2.2. Pasang pakej tempatan/pakej gudang git jauh

Pakej pergantungan kongsi tidak perlu diterbitkan ke sumber npm untuk digunakan.

1), Senario 1: Rujukan modul setempat

Panggilan antara modul tidak boleh dielakkan semasa pembangunan, kami meletakkan modul konfigurasi yang kerap dipanggil dalam direktori akar, dan kemudian jika terdapat banyak direktori peringkat, dan rujukan kemudiannya

const config = require(''../../../../..config)

Rujukan laluan sedemikian tidak kondusif untuk pemfaktoran semula kod. Pada masa ini kita perlu mempertimbangkan untuk mengasingkan modul ini untuk modul lain untuk dikongsi. Sebagai contoh, config.js boleh dirangkumkan ke dalam pakej dan diletakkan dalam direktori node_modules.

Tidak perlu menyalin atau membuat sambungan lembut secara manual ke direktori node_modules npm mempunyai penyelesaiannya sendiri:

Penyelesaian:

Tambah folder konfigurasi baharu dan tambah config.js ke dalam folder, tukar nama kepada index.js, buat package.json untuk mentakrifkan pakej konfigurasi

{ 
    "name": "config", 
    "main": "index.js", 
    "version": "0.1.0" 
}

2. Tambah dependencies dalam package.json projek, dan kemudian laksanakan npm i .

{ 
  "dependencies": { 
    "config":"file: ./config" 
  } 
}

Melihat pada direktori node_modules, kami akan menemui pautan lembut tambahan bernama config, menunjuk ke folder config/ atas. Ini kerana npm mengenali URL fail: protokol dan mengetahui bahawa pakej ini perlu diperolehi terus daripada sistem fail Ia akan membuat pautan lembut ke node_modules secara automatik untuk menyelesaikan proses "pemasangan".

2), Senario 2: Pakej kongsi git persendirian

Akan terdapat beberapa kod/perpustakaan awam dalam pasukan yang perlu dikongsi antara projek berbeza dalam pasukan, tetapi ia mungkin mengandungi sensitif kandungan.

Kami hanya boleh mengehoskan pakej bergantung dalam repositori git persendirian, dan kemudian menyimpan url git ke kebergantungan. npm akan terus memanggil arahan git sistem untuk menarik kandungan pakej dari gudang git ke node_modules.

Format url Git disokong oleh npm:

<protocol>://[<user>[:<password>]@]<hostname>[:<port>][:][/]<path>[#<commit-ish> | #semver:<semver>]

Selepas laluan git, anda boleh menggunakan # untuk menentukan cawangan/komit/tag git tertentu, atau #semver: untuk menentukan yang khusus julat semver.

Contohnya:

git+ssh://git@github.com:npm/npm.git#v1.0.27 
git+ssh://git@github.com:npm/npm#semver:^5.0 
git+https://isaacs@github.com/npm/npm.git 
git://github.com/npm/npm.git#v1.0.27

3), Senario 3: Pembaikan masalah pakej sumber terbuka

Pada masa ini kami boleh memasukkan direktori node_modules secara manual untuk mengubah suai kandungan pakej yang sepadan, mungkin diubah suai Satu baris kod membetulkan masalah. Tetapi pendekatan ini adalah sangat tidak bijak! url boleh menyelesaikan masalah.

3. Cara pemasangan npm berfungsi

Selepas npm i dilaksanakan, semua pakej bergantung dilihat dalam node_modules. Pembangun tidak memberi perhatian kepada butiran struktur folder node_modules, tetapi fokus pada pakej pergantungan yang dirujuk dalam kod perniagaan. Memahami struktur node_modules membantu kami lebih memahami cara npm berfungsi. npm2 kepada npm5 perubahan dan penambahbaikan.

3.1 npm2

npm2 menggunakan kaedah pemasangan rekursif mudah apabila memasang pakej kebergantungan. Setiap pakej mempunyai pakej kebergantungan sendiri, dan kebergantungan setiap pakej dipasang dalam node_modules sendiri Lapisan demi lapisan untuk membentuk keseluruhan pepohon pergantungan ini sepadan dengan pepohon struktur fail sistem fail. Cara paling mudah untuk bergantung pada pokok adalah dengan melaksanakannya dalam direktori akar

.

Kelebihan:

npm ls

Struktur hierarki yang jelas, mudah untuk pengurusan seperti orang bodoh.

  • Kelemahan:

    • Untuk projek yang kompleks, struktur direktori mungkin terlalu dalam, dan laluan fail dalam terlalu panjang, mencetuskan bahawa laluan fail dalam sistem fail tetingkap tidak boleh melebihi 260 aksara panjang.

    • Sesetengah pakej yang bergantung pada berbilang pakej dipasang berulang kali di banyak tempat, menyebabkan banyak lebihan.

    3.2 npm3

    direktori node_modules npm3 telah ditukar kepada struktur hierarki yang lebih rata. npm3 merentasi keseluruhan pepohon pergantungan semasa pemasangan dan mengira kaedah pemasangan folder yang paling munasabah Semua pakej yang bergantung berulang kali boleh dipasang semula.

    Untuk npm, pakej dengan nama yang sama dan versi berbeza ialah dua pakej bebas.

    Struktur pepohon kebergantungan npm3 tidak lagi sepadan dengan tahap folder satu-satu.

    3.3 npm5

    Ikuti kaedah pemasangan pakej kebergantungan rata npm3. Perubahan terbesar ialah penambahan fail package-lock.json.

    Fungsi Package-lock.json: mengunci struktur pemasangan kebergantungan, dan mendapati bahawa struktur hierarki fail direktori node_modules sepadan dengan struktur json satu-satu.

    Secara lalai, npm5 akan menjana fail package-lock.json selepas melaksanakan npm i dan menyerahkannya ke pangkalan kod git/svn.

    Untuk menaik taraf, jangan gunakan versi 5.0.

    Nota: Dalam npm 5.0, jika fail kunci pakej sudah wujud, jika anda menambah kebergantungan secara manual pada fail package.json dan kemudian melaksanakan pemasangan npm, kebergantungan baharu tidak akan dipasang dalam node_modules , pakej -lock.json tidak akan dikemas kini dengan sewajarnya.

    4. Pengurusan versi pakej kebergantungan

    Memperkenalkan pengetahuan berkaitan pengurusan peningkatan pakej kebergantungan.

    4.1 Semver versi semantik

    Ciri penting pengurusan kebergantungan npm mengguna pakai spesifikasi versi semantik (semver) sebagai penyelesaian pengurusan versi.

    Nombor versi semantik mesti mengandungi tiga nombor, dalam format: major.minor.patch. Ia bermaksud: nombor versi kecil yang diubah suai.

    Kita perlu menggunakan konvensyen semver dalam dependensi untuk menentukan nombor versi atau julat pakej dependensi yang diperlukan.

    Peraturan yang biasa digunakan adalah seperti berikut:

    Artikel ini akan membantu anda memahami prinsip npm

    versi semantik semantik

    Mana-mana dua peraturan disambungkan dengan ruang untuk mewakili "DAN "Logik ialah persilangan dua peraturan.

    Sebagai contoh, >=2.3.1 =2.3.1 dan

    • Boleh sepadan dengan 2.3.1, 2.4.5, 2.8.0
    • Tetapi ia tidak sepadan dengan 1.0.0, 2.3.0, 2.8.1, 3.0.0

    2. Mana-mana dua peraturan disambungkan dengan || untuk menyatakan logik "ATAU". Kesatuan peraturan.

    seperti ^2 >=2.3.1 || Boleh sepadan dengan 2.3.1, 2,8.1, 3.3.1

      Tetapi ia tidak sepadan dengan 1.0.0, 2.2.0, 3.1.0, 4.0.0
    • 3 Cara yang lebih intuitif untuk menulis julat nombor versi

    atau x sepadan dengan semua versi utama

      1 atau 1.x sepadan dengan semua versi dengan nombor versi utama 1
    • 1.2 atau 1.2.x sepadan dengan semua versi bermula dengan nombor versi 1.2
    • 4. Tambahkan selepas MAJOR.MINOR.PATCH - diikuti dengan teg dipisahkan titik, yang biasanya dianggap sebagai teg versi pra-keluaran Ini versi tidak stabil dan tidak disyorkan untuk kegunaan pengeluaran.

    1.0.0-alfa

      1.0.0-beta.1
    • 1.0.0-rc.3
    • 4.2 Naik taraf versi dependency

    Selepas memasang pakej dependensi, versi baharu dikeluarkan tentang peningkatan versi?

    kemas kini npm i atau npm, tetapi versi npm yang berbeza, fail package.json dan package-lock.json yang berbeza, prestasi pemasangan dan peningkatan adalah berbeza.

    • Kesimpulan penggunaan npm3:

    Jika node_modules tempatan telah dipasang, melaksanakan pemasangan semula tidak akan mengemas kini versi pakej, tetapi melaksanakan kemas kini akan mengemas kininya dan jika node_modules tempatan kosong, melaksanakan pemasangan/kemas kini akan memasang pakej kemas kini secara langsung.

      kemas kini npm akan sentiasa mengemas kini pakej kepada nombor versi terkini yang sepadan dengan semver yang dinyatakan dalam package.json - dalam kes ini, versi terkini yang sepadan dengan ^1.8.0 ialah 1.15.0
    • Setelah package.json diberikan, tidak kira sama ada pemasangan atau kemas kini npm dilaksanakan kemudian, versi webpack dalam package.json tetap tidak berubah dari awal ^1.8.0
    • Kesimpulan menggunakan npm5:

    Setiap kali pemasangan dilaksanakan, npm akan memberi keutamaan untuk memasang pek web mengikut versi yang dinyatakan dalam kunci pakej; b) dalam jadual npm 3; Apabila pemasangan/kemas kini selesai, fail kunci pakej akan sentiasa dikemas kini dengan node_modules - (jadi fail kunci pakej boleh dianggap sebagai perwakilan JSON bagi node_modules)

      Jika anda melaksanakan kemas kini npm selepas node_modules dipasang, nombor versi dalam package.json juga akan ditukar kepada ^1.15.0
    • 4.3 Amalan Terbaik
    Nod yang biasa saya gunakan ialah 8.11.x, npm ialah 5.6.0.

    •     使用npm >= 5.1 版本,保持package-lock.json文件默认开启配置。
    •     初始化,npm i 安装依赖包,默认保存^X.Y.Z,项目提交package.json和package-lock.json。
    •     不要手动修改package-lock.json

    升级依赖包:

    •     升级小版本,执行npm update升级到新的小版本。
    •     升级大版本,执行npm install @ 升级到新的大版本。
    •     手动修改package.json中的版本号,然后npm i。
    •     本地验证升级新版本后没有问题,提交新的package.json和package-lock.json文件。

    降级依赖包:

    •     正确:npm i @验证没有问题后,提交package.json和package-lock.json文件。
    •     错误:修改package.json中的版本号,执行npm i不会生效。因为package-lock.json锁定了版本。

    删除依赖包:

    •     A计划:npm uninstall 。提交package.json和package-lock.json。
    •     B计划:在package.json中删除对应的包,然后执行npm i,提交package.json和package-lock.json。

    五、npm的sctipts

    5.1 基本使用

    npm scripts是npm的一个重要的特性。在package.json中scripts字段定义一个脚本。

    比如:

    { 
        "scripts": { 
            "echo": "echo HELLO WORLD" 
        } 
    }

    我们可以通过npm run echo 命令执行这段脚本,就像shell中执行echo HELLO WOLRD,终端是可以看到输出的。

    总结如下:

    •     npm run 命令执行时,会把./node_modules/.bin目录添加到执行环境的PATH变量中。全局的没有安装的包,在node_modules中安装了,通过npm run 可以调用该命令。
    •     执行npm 脚本时要传入参数,需要在命令后加 -- 表明,比如 npm run test -- --grep="pattern" 可以将--grep="pattern"参数传给test命令。
    •     npm 还提供了pre和post两种钩子的机制,可以定义某个脚本前后的执行脚本。
    •     运行时变量:npm run 的脚本执行环境内,可以通过环境变量的方式获取更多的运行相关的信息。可以通过process.env对象访问获得:
    •     npm_lifecycle_event:正在运行的脚本名称
    •     npm_package_:获取当前package.json中某一个字段的匹配值:如包名npm_package_name
    •     npm_package__:package中的嵌套字段。

    5.2 node_modules/.bin目录

    保存了依赖目录中所安装的可供调用的命令行包。本质是一个可执行文件到指定文件源的映射。

    例如 webpack 就属于一个命令行包。如果我们在安装 webpack 时添加 --global 参数,就可以在终端直接输入 webpack 进行调用。

    上一节所说,npm run 命令在执行时会把 ./node_modules/.bin 加入到 PATH 中,使我们可直接调用所有提供了命令行调用接口的依赖包。所以这里就引出了一个最佳实践:

    •将项目依赖的命令行工具安装到项目依赖文件夹中,然后通过 npm scripts 调用;而非全局安装

    于是 npm 从5.2 开始自带了一个新的工具 npx.

    5.3 npx

    npx 的使用很简单,就是执行 npx 即可,这里的 默认就是 ./node_modules 目录中安装的可执行脚本名。例如上面本地安装好的 webpack 包,我们可以直接使用 npx webpack 执行即可。

    5.4 用法

    1、传入参数

    "scripts": { 
      "serve": "vue-cli-service serve", 
      "serve1": "vue-cli-service --serve1", 
      "serve2": "vue-cli-service -serve2", 
      "serve3": "vue-cli-service serve --mode=dev --mobile -config build/example.js" 
    }

    除了第一个可执行的命令,以空格分割的任何字符串都是参数,并且都能通过process.argv属性访问。

    比如执行npm run serve3命令,process.argv的具体内容为:

    [ &#39;/usr/local/Cellar/node/7.7.1_1/bin/node&#39;, 
      &#39;/Users/mac/Vue-projects/hao-cli/node_modules/.bin/vue-cli-service&#39;, 
      &#39;serve&#39;, 
      &#39;--mode=dev&#39;, 
      &#39;--mobile&#39;, 
      &#39;-config&#39;, 
      &#39;build/example.js&#39; 
    ]

    2、多命令运行 在启动时可能需要同时执行多个任务,多个任务的执行顺序决定了项目的表现。

    1)串行执行

    串行执行,要求前一个任务执行成功之后才能执行下一个任务。使用 && 服务来连接。

    npm run scipt1 && npm run script2

    串行执行命令,只要一个命令执行失败,整个脚本会中止的。

    2)并行执行

    并行执行,就是多个命令同时平行执行,使用 & 符号来连接。

    npm run script1 & npm run script2

    3、env 环境变量 在执行npm run脚本时,npm会设置一些特殊的env环境变量。其中package.json中的所有字段,都会被设置为以npm_package_ 开头的环境变量。

    4、指令钩子 在执行npm scripts命令(无论是自定义还是内置)时,都经历了pre和post两个钩子,在这两个钩子中可以定义某个命令执行前后的命令。比如在执行npm run serve命令时,会依次执行npm run preserve、npm run serve、npm run postserve,所以可以在这两个钩子中自定义一些动作:

    "scripts": { 
      "preserve": "xxxxx", 
      "serve": "cross-env NODE_ENV=production webpack", 
      "postserve": "xxxxxx" 
    }

    5、常用脚本示例

    // 删除目录 
    "clean": "rimraf dist/*", 
    
    // 本地搭建一个http服务 
    "server": "http-server -p 9090 dist/", 
    
    // 打开浏览器 
    "open:dev": "opener http://localhost:9090", 
    
    // 实时刷新 
    "livereload": "live-reload --port 9091 dist/", 
    
    // 构建 HTML 文件 
    "build:html": "jade index.jade > dist/index.html", 
    
    // 只要 CSS 文件有变动,就重新执行构建 
    "watch:css": "watch &#39;npm run build:css&#39; assets/styles/", 
    
    // 只要 HTML 文件有变动,就重新执行构建 
    "watch:html": "watch &#39;npm run build:html&#39; assets/html", 
    
    // 部署到 Amazon S3 
    "deploy:prod": "s3-cli sync ./dist/ s3://example-com/prod-site/", 
    
    // 构建 favicon 
    "build:favicon": "node scripts/favicon.js",

    六.npm配置

    6.1 npm config

    •     通过npm config ls -l 可查看npm 的所有配置,包括默认配置。
    •     通过npm config set ,常见配置:
    •     proxy,https-proxy:指定npm使用的代理
    •     registry:指定npm下载安装包时的源,默认是https://registry.npmjs.org。可以指定私有的registry源。
    •     package-lock.json:指定是否默认生成package-lock.json,建议保持默认true。
    •     save :true/false指定是否在npm i之后保存包为dependencies,npm5开始默认为true。
    •     通过npm config delete 删除指定的配置项。

    6.2 npmrc文件

    可以通过删除npm config命令修改配置,还可以通过npmrc文件直接修改配置。

    npmrc文件优先级由高到低,包括:

    •     工程内配置文件:项目根目录下的.npmrc文件
    •     用户级配置文件:用户配置里
    •     全局配置文件
    •     npm内置配置文件 我们可以在自己的团队中在根目录下创建一个.npmrc文件来共享需要在团队中共享的npm运行相关配置。

    比如:我们在公司内网下需要代理才能访问默认源:https://registry.npmjs.org源;或者访问内网的registry,就可以在工作项目下新增.npmrc文件并提交代码库。

    示例配置:

    proxy = http://proxy.example.com/ 
    https-proxy = http://proxy.example.com/ 
    registry = http://registry.example.com/

    这种在工程内配置文件的优先级最高,作用域在这个项目下,可以很好的隔离公司项目和学习研究的项目两种不同环境。

    将这个功能与 ~/.npm-init.js 配置相结合,可以将特定配置的 .npmrc 跟 .gitignore, README 之类文件一起做到 npm init 脚手架中,进一步减少手动配置。

    6.3 node版本约束

    一个团队中共享了相同的代码,但是每个人开发机器不一致,使用的node版本也不一致,服务端可能与开发环境不一致。

    •     这就带来了不一致的因素----方案:声明式约束+脚本限制。
    •     声明:通过package.json的engines属性声明应用运行所需的版本要求。例如我呢项目中使用了async,await特性,得知node查阅兼容表格[1]得知最低支持版本是7.6.0.因此指定engines配置为:
    { 
      "engines": {"node": ">=7.6.0"} 
    }
    •     强约束(可选):需要添加强约束,需要自己写脚本钩子,读取并解析engines字段的semver range并与运行环境做比对校验并适当提醒。

    总结

    •     npm init初始化新项目
    •     统一项目配置:需要团队共享npm config配置项,固化到.npmrc文件中
    •     统一运行环境:统一package.json,统一package-lock.json文件。
    •     合理使用多样化的源安装依赖包
    •     使用npm版本:>= 5.2版本
    •     使用npm scripts和npx管理相应脚本
    •     安全漏洞检查:npm audit fix修复安全漏洞的依赖包(本质:自动更新到兼容的安全版本)

    引用链接

    [1] node查阅兼容表格: https://node.green/

    更多node相关知识,请访问:nodejs 教程

Atas ialah kandungan terperinci Artikel ini akan membantu anda memahami prinsip npm. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Artikel ini dikembalikan pada:zzvips.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam