ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

javascript 开发前端准备

2022-09-14 23:03:12  阅读:400  来源: 互联网

标签:npm yrm 前端 javascript 开发 registry https 安装 npx


目录

javascript 开发前端准备

javascript一般自带了控制台,比如js语法,这是浏览器作为执行javascript的运行环境,但是我们开发不可能在浏览器上开发,我们需要在本地安装nodejs,nodesjs类似于javascript的一个执行器
image

安装NodeJs

官网地址: https://nodejs.org/en/
这是我当前打开的版本,左边是稳定版,右边是开发版,功能较新,我用的左边的
image

//NodeJs版本
> node -v
v16.15.0
//npm包管理工具版本,高版本自带npm
> npm -v 
8.5.5

安装Yarn

你可以认为Yarn是npm的增强版, 具体对比可以参考: Yarn vs npm
https://www.cnblogs.com/ypppt/p/13050845.html

//安装Yarn
> npm install --global yarn
//查看当前安装的版本
> yarn -v
1.22.18

Yarn 源的管理

默认Yarn使用的是国外的源, 这对于国内开放者而言的体验是很差的(由于网速经常拉去不下来包), 因此我们需要切换源, 而yrm 就是专门用于管理yarn源配置的工具, YARN registry manager(yrm):

// 安装yrm
> npm install -g yrm

//查看yrm的版本
> yrm -V    
1.0.6

处理这样查看我们可以通过npm来查看当前系统上已经安装的全局工具:

> npm -g ls
/usr/local/lib
├── corepack@0.10.0
├── npm@8.5.5
├── yarn@1.22.18
└── yrm@1.0.6

查看当前有哪些可用的源

> yrm ls
* npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
  taobao - https://registry.npm.taobao.org/
  nj ----- https://registry.nodejitsu.com/
  rednpm - http://registry.mirror.cqupt.edu.cn/
  npmMirror  https://skimdb.npmjs.com/registry/
  edunpm - http://registry.enpmjs.org/
  yarn --- https://registry.yarnpkg.com

最后我们通过yrm来设置我们的源:

//使用淘宝的源
> yrm use taobao
   YARN Registry has been set to: https://registry.npm.taobao.org/
   NPM Registry has been set to: https://registry.npm.taobao.org/

//测试下淘宝源当前下载速度
> yrm test taobao
    * taobao - 273ms

npx安装

npm 从5.2版开始,增加了 npx 命令, 如果没有安装请手动安装:
npm只是把包安装到一个目录下,使用时需要指定这个包的绝对路径,而npx可以解决,拿过来直接用

//查看当前npx版本
> npx -v
8.5.5
//如果没有手动安装到全局
> npm install -g npx

IDE插件安装

以下介绍使用vscode开发vue会使用的到的常见插件:

首先是一些前端开发必备插件:

  • Auto Rename Tag: 自动完成另一侧标签的同步修改
    你的html有<div></div>,如果你改第一个div为span,那么会自动把结尾的div改成span
    

image

  • Beautify: 格式化 html ,js,css,目前已经被vscode废弃,我没装
    image

  • ESLint: 代码质量提醒,这个设置比较复杂,我没装
    image

  • open in browser: 鼠标右键快速在浏览器中打开html文件
    image

  • Code Runner: 快速运行
    image

vue开发增强插件:

  • Vue Language Features (Volar): vue3语法支持
    image

  • Vue VSCode Snippets: 代码片段
    image

参考

标签:npm,yrm,前端,javascript,开发,registry,https,安装,npx
来源: https://www.cnblogs.com/liwenchao1995/p/16694944.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有