前端_005_Nodejs

[复制链接]
发表于 2026-1-8 21:20:27 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

×
1.Node.js 是js的一个运行环境,从nodejs诞生后js代码不范围于只在欣赏器中实验,别的还能再nodejs里写服务端,用js可从前后端全栈开辟
2.Node.js不跟欣赏器一样默认含有document,window对象,利用时必要引入
npm包管理器

通过package.json文件举行管理前端必要的包,
package-lock.json 会固化当前安装的每个软件包版本,运行npm update会更新该文件
npm分为当地模式和全局模式,一样平常带-g 都是全局安装
  1. npm常用命令
  2. --save 或 -S: 添加到package.json文件的dependencies列表中(默认行为)。
  3. --save-dev 或 -D: 添加到package.json文件的devDependencies列表中,表示该包仅用于开发环境。
  4. npm install --save-dev <PACKAGENAME>
  5. --global 或 -g: 全局安装该包,而不是安装在当前项目中。
  6. @<版本号>: 安装指定版本的包。
  7. npm install <package-name>@<version>
  8. npm init  //初始化
  9. npm install //安装模块
  10. npm run //执行脚本
  11. npm uninsall //卸载模块
  12. npm update //更新模块
  13. npm ls //查看已安装包
  14. npm run <task-name> //执行脚本任务
  15. npm cache clean //清理npm缓存
  16. npm get registry //获得当前使用镜像源
  17. npm config set registry https://registry.npmjs.org/ //修改镜像源
  18. npm root -g //查看全局安装路径
复制代码
package.json常用属性
  1. {
  2.   "name": "test-project",
  3.   "version": "1.0.0",
  4.   "description": "A Vue.js project",
  5.   "main": "src/main.js",
  6.   "private": true,
  7.   "scripts": {
  8.     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  9.     "start": "npm run dev",
  10.     "unit": "jest --config test/unit/jest.conf.js --coverage",
  11.     "test": "npm run unit",
  12.     "lint": "eslint --ext .js,.vue src test/unit",
  13.     "build": "node build/build.js"
  14.   },
  15.   "dependencies": {
  16.     "vue": "^2.5.2"
  17.   },
  18.   "devDependencies": {
  19.     "autoprefixer": "^7.1.2",
  20.     "babel-core": "^6.22.1",
  21.     "babel-eslint": "^8.2.1",
  22.     "babel-helper-vue-jsx-merge-props": "^2.0.3",
  23.     "babel-jest": "^21.0.2",
  24.     "babel-loader": "^7.1.1",
  25.     "babel-plugin-dynamic-import-node": "^1.2.0",
  26.     "babel-plugin-syntax-jsx": "^6.18.0",
  27.     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
  28.     "babel-plugin-transform-runtime": "^6.22.0",
  29.     "babel-plugin-transform-vue-jsx": "^3.5.0",
  30.     "babel-preset-env": "^1.3.2",
  31.     "babel-preset-stage-2": "^6.22.0",
  32.     "chalk": "^2.0.1",
  33.     "copy-webpack-plugin": "^4.0.1",
  34.     "css-loader": "^0.28.0",
  35.     "eslint": "^4.15.0",
  36.     "eslint-config-airbnb-base": "^11.3.0",
  37.     "eslint-friendly-formatter": "^3.0.0",
  38.     "eslint-import-resolver-webpack": "^0.8.3",
  39.     "eslint-loader": "^1.7.1",
  40.     "eslint-plugin-import": "^2.7.0",
  41.     "eslint-plugin-vue": "^4.0.0",
  42.     "extract-text-webpack-plugin": "^3.0.0",
  43.     "file-loader": "^1.1.4",
  44.     "friendly-errors-webpack-plugin": "^1.6.1",
  45.     "html-webpack-plugin": "^2.30.1",
  46.     "jest": "^22.0.4",
  47.     "jest-serializer-vue": "^0.3.0",
  48.     "node-notifier": "^5.1.2",
  49.     "optimize-css-assets-webpack-plugin": "^3.2.0",
  50.     "ora": "^1.2.0",
  51.     "portfinder": "^1.0.13",
  52.     "postcss-import": "^11.0.0",
  53.     "postcss-loader": "^2.0.8",
  54.     "postcss-url": "^7.2.1",
  55.     "rimraf": "^2.6.0",
  56.     "semver": "^5.3.0",
  57.     "shelljs": "^0.7.6",
  58.     "uglifyjs-webpack-plugin": "^1.1.1",
  59.     "url-loader": "^0.5.8",
  60.     "vue-jest": "^1.0.2",
  61.     "vue-loader": "^13.3.0",
  62.     "vue-style-loader": "^3.0.1",
  63.     "vue-template-compiler": "^2.5.2",
  64.     "webpack": "^3.6.0",
  65.     "webpack-bundle-analyzer": "^2.9.0",
  66.     "webpack-dev-server": "^2.9.1",
  67.     "webpack-merge": "^4.1.0"
  68.   },
  69.   "engines": {
  70.     "node": ">= 6.0.0",
  71.     "npm": ">= 3.0.0"
  72.   },
  73.   "browserslist": ["> 1%", "last 2 versions", "not ie <= 8"]
  74. }
复制代码
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 锁定依赖包版本
  1. yarn init
  2. yarn install
  3. yarn add [package]
  4. yarn add [package]@[version]
  5. yarn add [package]@[tag]
  6. yarn add [package] --dev  # dev dependencies
  7. yarn add [package] --peer # peer dependencies
  8. yarn up [package]
  9. yarn up [package]@[version]
  10. yarn up [package]@[tag]
  11. yarn remove [package]
  12. yarn config set <name> <value>
  13. yarn config set registry
  14. ``
复制代码
回复

使用道具 举报

登录后关闭弹窗

登录参与点评抽奖  加入IT实名职场社区
去登录
快速回复 返回顶部 返回列表