Babel 命令基础

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

这个 script.js 里面,这行代码是用 es6 的标准写的 .. 用的是箭头函数,就是用这个箭头定义的一个函数 .. 下面我们可以使用 babel 命令去把它编译成 es5 的标准.. 在命令行工具的下面,进入到项目所在的目录 .. 输入 babel .. 要编译的是这个目录下的 script.js ..

会直接在这里显示编译好的代码 .. 这里显示就是用普通方式定义的一个函数 .. 我们可以把这个编译后的结果放到一个文件里面 .. 先输入 babel script.js .. 后面加上一个 --out-file 选项 .. 也可以使用一个 -o .. 后面是要把编译结果放到的文件 .. 输入 script-compiled.js .. 意思是编译之后的 js 文件 .. 执行一下 ..

babel script.js --out-file script-compiled.js

回到编辑器 ... 这里你会看到多了一个 script-compiled.js 文件 .. 打开这个文件 .. 这里的东西就是编译之后的 script.js ..

在编译的时候也可以生成一个 source maps .. 在这行命令的后面,加上一个 --source-maps .. 在这个 babel 命令里面,再用一个 --watch 选项,这样就去监视文件的变化,然后自动为你编译有变化的文件 ..

这里再添加一个 --watch .. 执行一下 .. 这个命令会一直执行,直到你手工停止它 .. 回到编辑器 .. 修改一下 script.js 文件 .. 保存 .. 这个文件有了变化, babel 就会去编译它 .. 这里你会立即看到编译后的结果 ..

babel 也可以去编译整个目录 .. 先停止一下这个带 watch 选项的 babel 命令 .. 按一下 ctrl + C ..

编译整个目录可以这样 .. babel .. 后面是要编辑的东西所在的目录 .. 比如 src .. 然后用一个 --out-dir 选项,再指定一下编译好的东西要放到哪个目录里面 .. 比如 lib . 这样 babel 会把 src 里的所有东西编译好,然后放到 lib 这个目录的下面 .

另外,如果你想编译整个目录,然后把结果放到一个文件里 .. 这里可以使用一个 --out-file .. 它前面是一个目录的名字 .. 后面是一个编译好的文件的名字 .. script-compiled.js .. 这样就会把 src 目录里的所有的东西编译好,然后把结果放到一个叫 script-compiled.js 的文件里 ..

Babel 命令基础《 前端工具箱 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点