题记
今天,本来想用webstorm来写一写前端的算法题目,发现webstorm并不兼容ES6的语法,于是乎,便使用了很多办法来解决,终于花费一上午思考明白了问题,并解决了!
注:
我是拿node做题的。
正文
1.修改webstorm的setting
我打开了webstorm发现,语法检查报错
接着我们可以setting
下的Languages/Framwork
选择ES6,然后apply
一下
这次,我们再重新编译的时候会发现
现在已经可以使用了,并且有了语法提示。
但是,问题并没有解决。问题如下图:
我们发现,ES6的语法无法编译,除非我们的代码第一行使用
'use strict';
就是使用严格模式。
问题:但是,我们刚才明明已经修改了setting里面的JavaScript的版本了啊?
原因:这是因为我们是拿node来运行的,也就是说node是我们的编译器,而node并不是完全支持ES6的,我们还要保证node的编译器可以解决问题
2.寻找node解决支持es6的方案
(1) 使用babel
这里有一个链接使使用babel来转换语法的教程,请点击这里来查看。
但是,我并不想很麻烦的使用babel来转换来转换去,而且使用babel后,我们也不能在命令行中简单的使用
node xx.js
来执行了,需要换命令,这就代表着我们在webstorm中也要配置。
不用怕,我们还有更好的解决方案!
(2) node 6 已经支持ES6的96%的语法了!
我的天!我们 不需要借助babel来转换语法了,我们可以直接使用node就可以解析!
我们可以通过cmd的命令来查看node的 版本
node -v
这里,我的版本已经是6的了,是因为我已经更换了最新 版本。
下面我们就来到最重点的环节,如何使用NVM来更新我们的node的版本!
在Linux下可以使用 n
而我使用的是Windows,所以我选择了NVM
安装NVM
我们可以在 这里 下载,选择nvm-setup.zip
即可
下载的时候,默认下一步即可。
验证是否成功
在cmd中使用
nvm #
发现nvm已经安装成功了!
安装和管理node的版本
nvm list #查看本地所有node版本
nvm install 6.11.5 #安装 6.11.5 版本
nvm use 6.11.5 #切换至 6.11.5 版本
nvm uninstall 6.11.5 #卸载6.11.5 版本
当我们使用install
下载后
使用use
切换
我们可以看到
当前我正在使用6.11.5
接下来我们就可以去配置了,但是要记住你的nvm安装到哪里了哦!下面会用到!
webstorm配置
第一步,打开webstorm的Edit Configurations
第二步,进行配置,配置顺序如下图
注意,最后一定是指向node.exe的
点击ok
,之后apply
大功告成,我们再来看看任意一个js文件
发现,已经是node 6在编译了
这次我们再重新跑一下test.js试一试!
发现我们已经成功打印出来1
后记
其实,如今的前端项目很多都已经工程化,使用babel是必不可少的环节,可以日后加强学习!