babel踩坑入门,跌跌撞撞!

42次阅读

共计 709 个字符,预计需要花费 2 分钟才能阅读完成。

废话一句也不想说,直接上来就是干!想必你在用 babel 时就已经知道 babel 时干嘛用的了,我在这里就不再详细阐述。
1、问:我现在又编写了一个 ES6 语法的 js 文件怎么在低版本浏览器中无法运行
答:使用 babel【转译器】把高版本的语法转成低版本的语法(ES5)

2、问:那请问 babel 怎么使用?
答:先安装 babel-cli。安装步骤如下:
A. 在命令行中输入:npm install –save-dev babel-cli
B. 本地安装好后会出现“node_modules”文件夹,内涵 babel-cli
到此 babel-cli 已经安装完毕

安装过程中踩坑集锦:1:安装过程中安装的很慢,可以用 VPN 翻墙安装。2:安装后会有警告⚠,不要慌张,只是建议你有 package.json 文件 3. 本地安装的话,就不要使用 babel 什么什么了会报错。使用有法三:法一:全局安装,法二:进入 babel 目录(下面用的就是这个),法三:npx babel(先全局装 npx)
3、问:那请问安装好后怎么使用呢?

注意在 windows 下时路径时反斜杠()
3、问:天啦噜,发生什么情况了,编译时编译出来了,但是代码还是原来的样子啊,只是感觉复制了一份,哪里有问题?

代码:
解答:原因是因为我们还没有告诉 babel 去干什么,他就粗暴的复制一个啥也不干,那怎么处理呢,首先我们得手动创建 .babelrc 的文件, 这是一个 json 格式的文件,里面写如下:presets 表示预设,plugins 表示依赖的插件。这里不全后续待补充
先执行命令,安装 es2015
再编写 bablerc 文件:
这些都搞定后,再执行编译代码
然后再打开神奇的事情发生了
我们看看什么编译的文件
到此大功告成!!!

正文完
 0