推荐编辑器
记事本
是的,首先开发要明确一点,代码才是一个项目的核心,编辑器只是一个辅助工具,一个能给予可靠的关键词提示的工具,心中有代码,处处能开发;
而代码的运行也一样,编辑器只是起到一个辅助的作用,给关键命令行提供了一个可靠的按钮,只需要轻松点击即可完成该命令行的执行,完成代码的运行和debug;
所以要擅长运用命令行来运行代码,不要过度依赖编辑器,这样如果编辑器的某个按钮出问题,也能及时查找出原因并加以修正,要有离开了编辑器的buff加持,一样能写代码的能力
idea
idea可以编写任何类型语言的编辑器(C语言C++近两年才支持,其独立软件名为CLion),称之为宇宙最强编辑器也不为过,但仅限于企业版的idea,,上天能写代码,下海能写文档(md),写论文(latex),仅仅只需要简单的安装一些插件,便能给你提供最舒适的编写环境,使开发者更能集中精力到代码的逻辑和内容上而不是代码的复杂的语法上
更重要的还是编辑器领域智能的天花板,主要体现在提示智能、纠错智能、项目结构精准识别等方面,根据idea的提示,甚至不需要阅读外部依赖包的文档即可立即上手;代码标了红没关系,试试idea独有的绝活alt+enter
;idea还能精准识别项目所用框架、项目文件结构,甚至随意调整文件位置,也不需要手动修改代码中的引用路径
vscode
如果没有idea可以用,vscode也是一个很好的选择,智能程度上可能略逊于idea,但是作为一个合格的代码编辑器来讲,同样具有和idea一样的通过插件安装即可轻松编辑任何类型语言的能力(包括md,latex等)
不推荐vs
此处的VS指visual studio,尽管vs也具有编写多种语言的强大能力,但依然不推荐将其作为任何一种语言的编辑工具,不推荐的原因主要有
- vs吃C盘空间、卸不干净:这已经是vs诟病多年的老问题了,即便已经安装到了别的盘,vs还是会在C盘如同毒瘤一般占据很大的一席之地
- vs使项目结构变得复杂:一个简单的项目会被vs套了一层又一层,且只有点击属于vs专属的
.sln
文件且vs对该项目的配置文件内容正确才可以正常打开该项目,否则这就是一个死的项目,不利于我们专注于对这门语言这种框架的学习 - vs使项目的运行复杂化,使用vs更大的感觉是我在学习使用这个编辑器而不是这门语言,而等我熟练掌握了这个编辑器,便成了一个只会使用这一种编辑器的废人
总的来说,VS附带了太多与开发无关的东西,不利于项目的开发和维护,也不利于我们对开发语言的学习,又有着结构臃肿的缺点,绝对不做任何语言开发(包括vs最引以为傲的C、C++)的推荐
第一个项目
此处介绍脱离代码编辑器条件下创建项目的过程
yarn init
首先创建项目路径,将项目目录创建好后,将控制台转移至该路径,使用命令
npm init
或者yarn版本的(建议)
yarn init
提示输入任何项目有关信息按照提示来即可,执行完毕即可生成js项目的核心文件——
package.json
首先要了解json格式数据以及文件
其次介绍除望文生义即可理解的字段之外的几个关键字段
- main:整个项目的入口文件,即在该项目根目录下运行node .所能识别的js
- scripts:定义此项目可能用到的一些指令,常用例如:
start
、build
、test
等,使用时,例如规定"start":"node ."
,在该项目根目录下运行npm run start
或yarn run start
即可,这样做的好处在于可以精简指令的表达,例如我现在有一个"build": "dotenv -e .env.frm -e .env react-scripts build"
的指令,很明显,我输入yarn run build
能使这条命令更容易理解且更方便 - dependencies和devDependencies:带善人记录表(bushi),这里规定此项目需要用到的全部外部依赖名称及其版本号,package.json的版本号有一些符号的规定,详见这篇博客,dev和不带dev依赖的区别可以查看此博客(其实区别不大)
关键项目结构
node_modules
外部调用的好心人们写的开源依赖包的存放路径,此处文件一般由yarn/npm托管,不建议做任何改动
src
此路径存放项目全部源代码
.env
此文件中编写项目所需全部环境变量(其实可以直接修改电脑中环境变量,但是多个变量多个项目切换时便得不偿失了),需要配合dotenv
这个模组来使用(yarn add dotenv
)
readme.md
一个好的项目不仅要电脑能看懂,更重要的是地球人能看懂,项目的介绍文档也是需要认真编写的,markdown的语法比较简单,可以在此查看
输入输出
js的控制台输出即为简单的console.log()
函数,各种翻新花样的控制台输出方式npm中找各好心人写的开源包即可;控制台输入在此不做介绍,因为大部分时候用不上;
引用第一个好心人写的包
js程序如果要引用别人的包
- package.json的dependencies要有这个包的声明
- node_modules里要有这个包的资源
第一种引用方法便是:例如我要安装express
,在package.json的dependencies中添加包名express
以及其版本号^4.17.1
,随后在当前目录下的控制台中输入npm install [email protected] -s
或npm install
即可安装;
那么问题来了,知道有这个包,不知道他有哪些版本或者需要哪个版本怎么办?
问得好,当然是在npm或者GitHub上搜一下这个包,现场查看一下版本号了
但是每次都这么来一下未免太麻烦了,于是yarn很好的解决了这个问题,直接在控制台运行yarn add express
,默认为你安装最新的版本(非测试版),并自动修改你的package.json,并将其版本号改为^
格式
最后说点题外话,互联网的公开、开源精神是一种很宝贵的精神,GitHub、npm、maven这类的开源社区便是这种精神最好的体现的地方。世界需要有每个人出的一份力才能变成更好的世界,这才是互联网诞生的初衷,就是联通世界;遇到困难不要愧于接受别人的帮助,遵守开源协议就好,同时也不要吝啬自己给别人的帮助,尽自己的力为开源社区贡献代码,不白眼每一个新手,换句话说,大家都是臭写代码的,没有高低贵贱,互相扶持才能都写出来好的代码
创建第一个后台程序
此处以express服务器为例,使用nodejs原生支持的es5语法
const express=require('express') // es调包的方式,es6为import
const app=express()//使用express这个函数
app.get("/",async (req,res)=>{res.send("hello word")})//创建一个默认接口;async 为异步函数的标记,后期讲解;此处使用箭头格式定义函数
app.listen(8080)//监听8080端口
console.log("success")//成功提示
- js行末可以不写分号
;
,如果认为影响美观可以通过设置eslint修改 - 将此文件命名为
index.js
,放在package.json同级目录下(注意设置package.json
中的main
为index.js
) - 当前目录的控制台中运行
node .
,或配置package.json中scripts
"scripts":{
"start":"node ."
}
使用命令yarn run start
控制台输出success
,即为运行成功
此时打开浏览器,输入链接localhost:8080
,看到hello word
字样,即为启动成功
此时,第一个node后台服务器已搭建完毕