上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

[油猴脚本开发指南]npm介绍

[复制链接]
  • TA的每日心情
    慵懒
    2024-10-28 07:07
  • 签到天数: 193 天

    [LV.7]常住居民III

    712

    主题

    5961

    回帖

    6760

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6760

    荣誉开发者喜迎中秋油中2周年生态建设者

    发表于 2022-8-23 23:47:01 | 显示全部楼层 | 阅读模式

    简介

    在之前的介绍中我们已经安装了nodejs
    而npm是伴随着nodejs一起安装的包管理工具
    你可以在cmd中输入npm -v来查看当前的npm版本
    npm -v
    8.5.5
    包管理工具是什么?
    当然是管理包的了
    我们可以将一个项目视为一个包
    同时可以对该项目安装/删除/使用其他的包
    我们来了解一下如何安装吧

    初始化项目

    在任意一个目录(推荐为英文)
    打开cmd,输入npm init
    填入对应的信息
    就会在目录下生成一个package.json文件
    如果你不想填入对应信息,则可以使用npm init -y(注意要是英文目录)
    图片.png
    我们查看一下package.json的文件内容

    {
      "name": "pack",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC"
    }

    name代表输入的包名
    version代表版本
    description代表描述
    main代表我们该包的入口文件,如果使用require会自动引入该文件
    在其他需要寻找主文件的时候通常也会通过package.json进行查找
    scripts代表npm脚本,后续我们会教大家怎么写简单的脚本命令
    author是作者名
    license是开源许可
    那么我们就了解了基础的包的相关信息以及如何创建一个项目
    接下来我们来看一下其他的命令

    包管理命令

    修改为国内淘宝源

    因为不明原因导致世界线扭曲,所以需要修改源为国内淘宝源才可以正常使用
    npm config set registry https://registry.npm.taobao.org
    修改后查看是否修改成功
    npm config get registry
    如果想重置为官方源输入
    npm config set registry https://registry.npmjs.org/

    安装模块

    我们使用npm i xxx来安装一个包
    但是npm i xxx分为两种
    npm install <模块名> --save
    npm install <模块名> --save-dev
    PS:你也可以将install简写成i,如npm i xxx --save
    两者的区别就是会在安装包后
    将包放在dependencies或devDependencies目录
    --save会放在dependencies
    --save-dev会放在devDependencies
    dependencies表示是生产环境下也需要的依赖
    devDependencies表示仅在开发环境下需要的依赖
    如Jquery,在我们编译后的代码也需要,所以属于生产依赖
    而代码风格校验工具等,在我们开发的时候才需要,在编译就不需要了,所以属于开发依赖
    实际情况下即使你写错了大部分情况还是没什么问题了
    但是推荐你严格按照标准来进行遵守
    因为在你从github/npm来查找库的时候
    会直接提供给你安装命令语句,直接赋值粘贴即可

    安装特定版本模块

    在包名后加@版本号即可

    npm install [email]jquert@0.01[/email] --save
    这样

    卸载模块

    输入
    npm uninstall <模块名>
    npm uninstall <模块名> --save
    PS:你也可以将uninstall 简写成un,如npm un xxx --save

    如何传递给他人项目

    我们现在的目录是
    图片.png
    仅需要Ctrl+A全选文件,然后不勾选node_modules库
    打包文件,发给其他人就好了
    node_modules是用来存放包管理工具下载的项目依赖的包的文件夹位置
    实际的代码内容是根据你的操作系统等等因素有所改变的,所以不要打包给其他人

    他人项目我如何来使用

    上面叙述的内容
    当其他人给你这种文件后
    你直接在cmd中输入npm i即可拿到代码正常使用

    关于包的一点其他提示

    注意如果出现各种各样的灵异问题
    先去查看官方的包的版本以及你的版本
    确保安装的各种依赖版本正确
    比如A是0.0.1 你在使用一段时间后
    又需要安装A的增强插件B
    但是B随着官方更新可能已经到了99.0.0
    此时A跟B的版本差异极大
    此时需要卸载,按你的需求重新安装对应的版本
    我不止一次踩这个坑了...

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情
    开心
    昨天 13:37
  • 签到天数: 213 天

    [LV.7]常住居民III

    305

    主题

    4189

    回帖

    4056

    积分

    管理员

    积分
    4056

    管理员荣誉开发者油中2周年生态建设者喜迎中秋油中3周年挑战者 lv2

    发表于 2022-8-24 09:35:35 | 显示全部楼层
    快要成前端开发指南了
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2024-10-28 07:07
  • 签到天数: 193 天

    [LV.7]常住居民III

    712

    主题

    5961

    回帖

    6760

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6760

    荣誉开发者喜迎中秋油中2周年生态建设者

    发表于 2022-8-24 11:15:58 | 显示全部楼层
    王一之 发表于 2022-8-24 09:35
    快要成前端开发指南了

    我前阵子脑子里也吐槽了这个问题...
    都开始准备配上webpack了
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    昨天 13:37
  • 签到天数: 213 天

    [LV.7]常住居民III

    305

    主题

    4189

    回帖

    4056

    积分

    管理员

    积分
    4056

    管理员荣誉开发者油中2周年生态建设者喜迎中秋油中3周年挑战者 lv2

    发表于 2022-8-24 13:42:50 | 显示全部楼层
    李恒道 发表于 2022-8-24 11:15
    我前阵子脑子里也吐槽了这个问题...
    都开始准备配上webpack了

    感觉没必要这么深了。。。提供一个脚手架就行了
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2024-10-28 07:07
  • 签到天数: 193 天

    [LV.7]常住居民III

    712

    主题

    5961

    回帖

    6760

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6760

    荣誉开发者喜迎中秋油中2周年生态建设者

    发表于 2022-8-24 14:10:08 | 显示全部楼层
    王一之 发表于 2022-8-24 13:42
    感觉没必要这么深了。。。提供一个脚手架就行了

    要讲webpack分析...
    我是想一边教正向搭建一边解读webpack的编译代码
    提供一个解决方案
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    昨天 13:37
  • 签到天数: 213 天

    [LV.7]常住居民III

    305

    主题

    4189

    回帖

    4056

    积分

    管理员

    积分
    4056

    管理员荣誉开发者油中2周年生态建设者喜迎中秋油中3周年挑战者 lv2

    发表于 2022-8-24 15:02:42 | 显示全部楼层
    李恒道 发表于 2022-8-24 14:10
    要讲webpack分析...
    我是想一边教正向搭建一边解读webpack的编译代码
    提供一个解决方案

    ggnb!
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表