当前位置: 首页 > news >正文

前端_005_Nodejs

文章目录

  • npm包管理器
  • cjs和mjs
  • Yarn包管理器

1.Node.js 是js的一个运行环境,从nodejs诞生后js代码不局限于只在浏览器中执行,此外还能再nodejs里写服务端,用js可以前后端全栈开发

2.Node.js不跟浏览器一样默认含有document,window对象,使用时需要引入

npm包管理器

通过package.json文件进行管理前端需要的包,

package-lock.json 会固化当前安装的每个软件包版本,运行npm update会更新该文件

npm分为本地模式和全局模式,一般带-g 都是全局安装

npm常用命令--save 或 -S: 添加到package.json文件的dependencies列表中(默认行为)。--save-dev 或 -D: 添加到package.json文件的devDependencies列表中,表示该包仅用于开发环境。
npm install --save-dev <PACKAGENAME>
--global 或 -g: 全局安装该包,而不是安装在当前项目中。@<版本号>: 安装指定版本的包。
npm install <package-name>@<version>npm init  //初始化
npm install //安装模块
npm run //执行脚本
npm uninsall //卸载模块
npm update //更新模块
npm ls //查看已安装包
npm run <task-name> //执行脚本任务
npm cache clean //清理npm缓存
npm get registry //获得当前使用镜像源
npm config set registry https://registry.npmjs.org/ //修改镜像源
npm root -g //查看全局安装路径

package.json常用属性

{"name": "test-project","version": "1.0.0","description": "A Vue.js project","main": "src/main.js","private": true,"scripts": {"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js","start": "npm run dev","unit": "jest --config test/unit/jest.conf.js --coverage","test": "npm run unit","lint": "eslint --ext .js,.vue src test/unit","build": "node build/build.js"},"dependencies": {"vue": "^2.5.2"},"devDependencies": {"autoprefixer": "^7.1.2","babel-core": "^6.22.1","babel-eslint": "^8.2.1","babel-helper-vue-jsx-merge-props": "^2.0.3","babel-jest": "^21.0.2","babel-loader": "^7.1.1","babel-plugin-dynamic-import-node": "^1.2.0","babel-plugin-syntax-jsx": "^6.18.0","babel-plugin-transform-es2015-modules-commonjs": "^6.26.0","babel-plugin-transform-runtime": "^6.22.0","babel-plugin-transform-vue-jsx": "^3.5.0","babel-preset-env": "^1.3.2","babel-preset-stage-2": "^6.22.0","chalk": "^2.0.1","copy-webpack-plugin": "^4.0.1","css-loader": "^0.28.0","eslint": "^4.15.0","eslint-config-airbnb-base": "^11.3.0","eslint-friendly-formatter": "^3.0.0","eslint-import-resolver-webpack": "^0.8.3","eslint-loader": "^1.7.1","eslint-plugin-import": "^2.7.0","eslint-plugin-vue": "^4.0.0","extract-text-webpack-plugin": "^3.0.0","file-loader": "^1.1.4","friendly-errors-webpack-plugin": "^1.6.1","html-webpack-plugin": "^2.30.1","jest": "^22.0.4","jest-serializer-vue": "^0.3.0","node-notifier": "^5.1.2","optimize-css-assets-webpack-plugin": "^3.2.0","ora": "^1.2.0","portfinder": "^1.0.13","postcss-import": "^11.0.0","postcss-loader": "^2.0.8","postcss-url": "^7.2.1","rimraf": "^2.6.0","semver": "^5.3.0","shelljs": "^0.7.6","uglifyjs-webpack-plugin": "^1.1.1","url-loader": "^0.5.8","vue-jest": "^1.0.2","vue-loader": "^13.3.0","vue-style-loader": "^3.0.1","vue-template-compiler": "^2.5.2","webpack": "^3.6.0","webpack-bundle-analyzer": "^2.9.0","webpack-dev-server": "^2.9.1","webpack-merge": "^4.1.0"},"engines": {"node": ">= 6.0.0","npm": ">= 3.0.0"},"browserslist": ["> 1%", "last 2 versions", "not ie <= 8"]
}

cjs和mjs

1.mjs是ECMA module,加载ES相关模块, 使用import和export,这个是ES6标准

cjs是node.js独有的模块,commonjs,使用require()加载和module.exports输出

require()是同步加载,后面的代码必须等待这个命令执行完,才会执行。import命令则是异步加载

2.Node.js 遇到.mjs文件,就认为它是 ES6 模块,默认启用严格模式,默认是加载commonjs

.mjs文件总是以 ES6 模块加载,.cjs文件总是以 CommonJS 模块加载,.js文件的加载取决于package.json里面type字段的设置。 {type:“module”}

3.网页中引入使用module 的js 可以指定script 其type 为modules

Ps:
Es模块只能通过http 协议工作,不支持file:// 本地打开文件 所以只能通过搭建服务器的方式打开使用Es 模块的网页

另外不要尝试用vs code里liveserver 插件尝试使用import 或者require 方式,这个插件起的服务器是找不到这种方式引入的模块


其他nodejs提供许多后端语言支持的特性,如文件操作,异步…等等 这个用到时查找官方手册即可

node.js手册

ackage.json里面type`字段的设置。 {type:“module”}

Yarn包管理器

yarn.lock 锁定依赖包版本

yarn init
yarn install
yarn add [package]
yarn add [package]@[version]
yarn add [package]@[tag]
yarn add [package] --dev  # dev dependencies
yarn add [package] --peer # peer dependencies
yarn up [package]
yarn up [package]@[version]
yarn up [package]@[tag]
yarn remove [package]
yarn config set <name> <value>
yarn config set registry
``

相关文章:

前端_005_Nodejs

文章目录 npm包管理器cjs和mjsYarn包管理器 1.Node.js 是js的一个运行环境&#xff0c;从nodejs诞生后js代码不局限于只在浏览器中执行&#xff0c;此外还能再nodejs里写服务端&#xff0c;用js可以前后端全栈开发 2.Node.js不跟浏览器一样默认含有document,window对象&#xf…...

SpringCache缓存介绍

1.为什么需要缓存 ​ 前台请求&#xff0c;后台先从缓存中取数据&#xff0c;取到直接返回结果&#xff0c;取不到时从数据库中取&#xff0c;数据库取到更新缓存&#xff0c;并返回结果&#xff0c;数据库也没取到&#xff0c;那直接返回空结果&#xff1a; 使用缓存是一个很…...

python实战(一)——iris鸢尾花数据集分类

一、任务背景 本文是python实战系列专栏的第一篇文章&#xff0c;我们将从分类开始由浅入深逐步学习如何使用python完成常规的机器学习/深度学习任务。iris数据集是经典的机器学习入门数据集&#xff0c;许多分类任务教程都会以这个数据集作为示例&#xff0c;它的数据量是150条…...

k8s-对命名空间资源配额

对k8s命名空间限制的方法有很多种&#xff0c;今天来演示一下很常用的一种 用的k8s对象就是ResourceQuota 一&#xff1a;创建命名空间 kubectl create ns test #namespace命名空间可以简写成ns 二&#xff1a; 对命名空间进行限制 创建resourcequota vim resourcequ…...

Failed to connect to github.com port 443

git push无法连接443端口 **问题1****方法一&#xff1a;取消代理设置**git命令 其他解决方案1. **设置 Git 使用 HTTP 而不是 HTTPS**2. **检查证书**3. **配置 Git 忽略 SSL 验证&#xff08;不推荐&#xff09;**4. **检查代理设置** 问题1 Failed to connect to github.com…...

【设计模式系列】简单工厂模式

一、什么是简单工厂模式 简单工厂模式&#xff08;Simple Factory Pattern&#xff09;是一种设计模式&#xff0c;其中包含一个工厂类&#xff0c;根据传入的参数不同&#xff0c;返回不同类的实例。这个工厂类封装了对象的创建逻辑&#xff0c;使得客户端代码可以从直接创建…...

给定一个正整数n随机生成n个字节即生成2n个十六进制数将其组成字符串返回secrets.token_hex(n)

【小白从小学Python、C、Java】 【考研初试复试毕业设计】 【Python基础AI数据分析】 给定一个正整数n 随机生成n个字节 即生成2n个十六进制数 将其组成字符串返回 secrets.token_hex(n) [太阳]选择题 根据题目代码&#xff0c;执行的结果错误的是&#xff1f; import secrets …...

[Gtk] 工程

MediaPlayer 可执行文件工程 结构 . ├── BUILD ├── ButtonHelper.cpp ├── ButtonHelper.h ├── CMakeLists.txt ├── DrawingAreaHelper.cpp ├── DrawingAreaHelper.h ├── layout.ui └── main.cpp CMakeLists.txt # 1) cmake basic cmake_minimum_r…...

基于Multisim的汽车尾灯控制电路设计与仿真

假设汽车尾部左右量测各有3个指示灯&#xff08;用发光二极管模拟&#xff09;1. 汽车正常运行时指示灯全灭&#xff1b;2.右转弯时&#xff0c;右侧3个指示灯按右循环顺序点亮&#xff1b;.3. 左转弯时&#xff0c;左侧3个指示灯按左循环顺序点亮&#xff1b;4.临时刹车时所有…...

Leetcode 3326. Minimum Division Operations to Make Array Non Decreasing

Leetcode 3326. Minimum Division Operations to Make Array Non Decreasing 1. 解题思路2. 代码实现 题目链接&#xff1a;3326. Minimum Division Operations to Make Array Non Decreasing 1. 解题思路 这一题的话就是要看出来题中给出的operation的本质事实上就是将任意…...

redo文件误删除后通过逻辑备份进行恢复

问题描述 开发同事让在一个服务器上查找下先前库的备份文件是否存在&#xff0c;如果存在进行下恢复。翻了服务器发现备份文件存在&#xff0c;多愁了一眼竟翻到了该备份文件于2024.6.17日恢复过的日志&#xff0c;赶紧和开发沟通说2024.6.17号已经恢复过了为啥还要恢复&#x…...

7805的输出电压如何调整?

7805稳压集成电路的输出电压通常是固定的&#xff0c;标称为5V。然而&#xff0c;在实际应用中&#xff0c;可以通过一些方法调整其输出电压&#xff0c;尽管这些调整方法可能会使电路变得更加复杂或需要额外的元件。以下是几种可能的调整方法&#xff1a; 1. 使用不同型号的稳…...

git命令使用一览【自用】

git常见操作&#xff1a; git initgit remote add master【分支名字】 gitgits.xxxxx【仓库中获取的ssh链接或者http协议的链接】检查远程仓库是否链接成功。 git remote -v出现以下画面就可以git pull,git push了...

MES系列-报表和分析

MES系列-报表和分析 MES系列文章目录 ISA-95制造业中企业和控制系统的集成的国际标准-(1) ISA-95制造业中企业和控制系统的集成的国际标准-(2) ISA-95制造业中企业和控制系统的集成的国际标准-(3) ISA-95制造业中企业和控制系统的集成的国际标准-(4) ISA-95制造业中企业和控制…...

如何在分布式环境中实现高可靠性分布式锁

目录 一、简单了解分布式锁 &#xff08;一&#xff09;分布式锁&#xff1a;应对分布式环境的同步挑战 &#xff08;二&#xff09;分布式锁的实现方式 &#xff08;三&#xff09;分布式锁的使用场景 &#xff08;四&#xff09;分布式锁需满足的特点 二、Redis 实现分…...

Vue基础(4)

自定义指令 除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。在vue中使用directive来创建自定义指令 钩子函数 指令定义函数提供了几个钩子函数&#xff08;可选&#xff09;&#xff1a; bind: 只调用一次&#xff0c;指令第一次绑定到元素时调用&…...

Redis高阶篇之Redis单线程与多线程

文章目录 0 前言1. 为什么Redis是单线程&#xff1f;1.1 Redis单线程1.2 为什么Redis3时代单线程快的原因1.3 使用单线程原因 2.为什么逐渐加入多线程呢&#xff1f;2.1 如何解决 3.redis6/7的多线程特性和IO多路复用入门3.1主线程和IO线程怎么协作完成请求处理的3.2 Unix网络编…...

【C++】STL——priority_queue优先级队列

目录 前言priority_queue的使用简单使用在OJ中的使用 priority_queue的模拟实现基本功能仿函数在这里插入图片描述 前言 上一节我们说了stack和queue这两种容器适配器&#xff0c;而priority_queue&#xff08;优先级队列&#xff09;同样也是属于容器适配器&#xff0c;它会优…...

大数据新视界 --大数据大厂之大数据在智慧城市建设中的应用:打造智能生活的基石

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…...

使用枚举来实现策略模式

使用很多if else的场景 public void save(String type,Object data){if("db".equals(type)){saveInDb(data);}else if("file".equals(type)){saveInFile(data);}else if("oss".equals(type)){saveInOss(data);}}使用枚举来解决 public enum Save…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

【Go语言基础【12】】指针:声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

C++_哈希表

本篇文章是对C学习的哈希表部分的学习分享 相信一定会对你有所帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、基础概念 1. 哈希核心思想&#xff1a; 哈希函数的作用&#xff1a;通过此函数建立一个Key与存储位置之间的映射关系。理想目标&#xff1a;实现…...

java高级——高阶函数、如何定义一个函数式接口类似stream流的filter

java高级——高阶函数、stream流 前情提要文章介绍一、函数伊始1.1 合格的函数1.2 有形的函数2. 函数对象2.1 函数对象——行为参数化2.2 函数对象——延迟执行 二、 函数编程语法1. 函数对象表现形式1.1 Lambda表达式1.2 方法引用&#xff08;Math::max&#xff09; 2 函数接口…...

react菜单,动态绑定点击事件,菜单分离出去单独的js文件,Ant框架

1、菜单文件treeTop.js // 顶部菜单 import { AppstoreOutlined, SettingOutlined } from ant-design/icons; // 定义菜单项数据 const treeTop [{label: Docker管理,key: 1,icon: <AppstoreOutlined />,url:"/docker/index"},{label: 权限管理,key: 2,icon:…...

VSCode 使用CMake 构建 Qt 5 窗口程序

首先,目录结构如下图: 运行效果: cmake -B build cmake --build build 运行: windeployqt.exe F:\testQt5\build\Debug\app.exe main.cpp #include "mainwindow.h"#include <QAppli...

深入解析 ReentrantLock:原理、公平锁与非公平锁的较量

ReentrantLock 是 Java 中 java.util.concurrent.locks 包下的一个重要类,用于实现线程同步,支持可重入性,并且可以选择公平锁或非公平锁的实现方式。下面将详细介绍 ReentrantLock 的实现原理以及公平锁和非公平锁的区别。 ReentrantLock 实现原理 基本架构 ReentrantLo…...

Easy Excel

Easy Excel 一、依赖引入二、基本使用1. 定义实体类&#xff08;导入/导出共用&#xff09;2. 写 Excel3. 读 Excel 三、常用注解说明&#xff08;完整列表&#xff09;四、进阶&#xff1a;自定义转换器&#xff08;Converter&#xff09; 其它自定义转换器没生效 Easy Excel在…...

大模型真的像人一样“思考”和“理解”吗?​

Yann LeCun 新研究的核心探讨&#xff1a;大语言模型&#xff08;LLM&#xff09;的“理解”和“思考”方式与人类认知的根本差异。 核心问题&#xff1a;大模型真的像人一样“思考”和“理解”吗&#xff1f; 人类的思考方式&#xff1a; 你的大脑是个超级整理师。面对海量信…...