没有合适的资源?快使用搜索试试~ 我知道了~
08_babel对JS-Vue处理1
需积分: 0 0 下载量 178 浏览量
2022-08-03
21:39:19
上传
评论
收藏 1.15MB PDF 举报
温馨提示
试读
35页
Babel命令行使用npm install @babel/cli @babel/core -Dnpx babel src --out-dir distn 比如我
资源详情
资源评论
资源推荐
Babel和devServer
王红元 coderwhy
coderwhy
n 事实上,在开发中我们很少直接去接触babel,但是babel对于前端开发来说,目前是不可缺少的一部分:
p 开发中,我们想要使用ES6+的语法,想要使用TypeScript,开发React项目,它们都是离不开Babel的;
p 所以,学习Babel对于我们理解代码从编写到线上的转变过程至关重要;
n 那么,Babel到底是什么呢?
p Babel是一个工具链,主要用于旧浏览器或者环境中将ECMAScript 2015+代码转换为向后兼容版本的
JavaScript;
p 包括:语法转换、源代码转换等;
为什么需要babel?
coderwhy
n babel本身可以作为一个独立的工具(和postcss一样),不和webpack等构建工具配置来单独使用。
n 如果我们希望在命令行尝试使用babel,需要安装如下库:
p @babel/core:babel的核心代码,必须安装;
p @babel/cli:可以让我们在命令行使用babel;
n 使用babel来处理我们的源代码:
p src:是源文件的目录;
p --out-dir:指定要输出的文件夹dist;
Babel命令行使用
npm install @babel/cli @babel/core -D
npx babel src --out-dir dist
coderwhy
n 比如我们需要转换箭头函数,那么我们就可以使用箭头函数转换相关的插件:
n 查看转换后的结果:我们会发现 const 并没有转成 var
p 这是因为 plugin-transform-arrow-functions,并没有提供这样的功能;
p 我们需要使用 plugin-transform-block-scoping 来完成这样的功能;
插件的使用
npm install @babel/plugin-transform-arrow-functions -D
npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions
npm install @babel/plugin-transform-block-scoping -D
npx babel src --out-dir dist --plugins=@babel/plugin-transform-block-scoping
,@babel/plugin-transform-arrow-functions
coderwhy
n 但是如果要转换的内容过多,一个个设置是比较麻烦的,我们可以使用预设(preset):
p 后面我们再具体来讲预设代表的含义;
n 安装@babel/preset-env预设:
n 执行如下命令:
Babel的预设preset
npm install @babel/preset-env -D
npx babel src --out-dir dist --presets=@babel/preset-env
剩余34页未读,继续阅读
好运爆棚
- 粉丝: 30
- 资源: 342
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0