#编程语言/前端 #编程语言/前端

搭建环境

我在 Ubuntu 下用 VSCODE 搭建前端开发环境，用 Windows 也差不多。

1 VSCode

VSCode 是微软推出的可运行于 Mac OS X、Windows 和 Linux 多平台上的源码编辑器，前端开发一般都用它。

1.1 安装

1
sudo dpkg -i code_1.63.2-1639562499_amd64.deb

1.2 运行

  • 在启动器里输入 code，然后选择 Visual Studio Code
  • 根据提示下载安装中文环境
  • 安装两个插件（通过左侧扩展按钮调出）
    • Code Runner
    • HTML CSS Support
  • 打开文件夹（点左侧的资源管理器按钮）
  • 创建一个 html 文件，加入简单代码
1
2
3
4
5
<html>
	<body>
		<script>alert('Hello World')</script>
	</body>
</html>
  • 按 F5 之后选择 Chrome，即可看 Chrome 浏览器被调出，并看到到弹框

2 npm

npm 用于 JavaScript 的包管理工具。

2.1 安装 npm

1
$ sudo apt install npm

2.1.1 修改 npm 数据源

修改 npm 数据源，以加快下载速度

1
2
3
$ vi $HOME/.npmrc
加入如下内容：
registry = http://registry.npm.taobao.org/

看看是否设置成功

1
$ npm config get registry

2.2 安装常用软件包

n 是一个 Node 工具包

1
2
3
4
$ sudo npm install -g npm@8.3.2 # 升成指定版本的npm, -g为全局安装
$ sudo npm install -g n # 安装node工具包
$ sudo npm install n stable  # 安装最新的稳定工具包
$ sudo npm install -g create-react-app # 安装react项目工具

查看包安装位置

1
$ npm config ls

查看安装包的可用版本

1
$ npm view 包名 versions --json

查看软件信息

1
$ sudo npm info xxx

查看当前安装的软件版本

1
$ sudo npm -v xxx

查看软件版本

1
$ sudo npm view xxx versions

2.2.1 npm 安装包语法

  • npm 安装模块
1
2
3
4
$ npm install xxx # 安装xxx模块到当前命令行所在目录node_moduels下
$ npm install -g xx # 安装全局模块xxx
$ npm install xxx –save # 安装并写入package.json的”dependencies”中
$ npm install xxx –save-dev # 安装并写入package.json的”devDependencies”中。
  • npm 删除模块
1
2
$ npm uninstall xxx # 删除xxx模块
$ npm uninstall -g xxx # 删除全局模块xxx

2.3 create-react-app 文件结构

  • node_modules：存放可能依赖的模块和插件
  • package.json：记录 node_modules 中的包其及版本信息，使用 npm install（npm isntall --production 只安装本项目依赖包）可自动安装 node_modules 下所有包
  • package-lock.json：记录模块之前依赖，锁定包版本，记录下载地址，加快重新下载速度
  • src：JS 代码
  • public：其它 html 文件和资源

详见：package.json与package-lock.json文件是干什么用的？

2.4 本地和全局安装

npm 有两种安装方式：全局和本地。使用参数 -g 设置为全局安装，软件安装在系统目录中，像 npm，n 这些基础包建立全局安装。只供本项目使用的，一般不加 -g 参数，即本地安装，包被安装在当前项目的 node-modules 子目录中。

2.5 软件版本

一般项目目录下包含 package.json，用于指定相关软件包的版本，如果未在该文件中指定，则默认安装软件的最新版本。

3 参考

百度百科visual studio code

npm中文文档