前端_005_Nodejs

文章目录

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/ //修改镜像源

package.json常用属性

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

mjs是ECMA module,加载ES相关模块, 使用import和export

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

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

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

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


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

node.js手册

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

相关推荐
YBN娜3 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=3 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
minDuck8 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!28 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。34 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼40 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k093344 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13581 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning1 小时前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人1 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架