独立利用babel转换es6
这里笔者记录一下 之前一直是用webpack去帮助我们转换es6的语法 后来查找到独立的babel也可以完成,用后觉得可以 现在想记录下来 为以后的前端生活 垫一块砖
先安装全局的babel cnpm install -g babel-cli
然后进入一个盘符下 新建一个文件夹作为我们的项目 babelTest
进入项目文件夹 后 生成package.json (在cmd输入npm init)
先下载es5规则 cnpm install babel-preset-es2015 -g
创建你的babel配置文件 .babelrc (就在项目目录就可以了)
然后在你的配置文件里 添加上我们刚下载好的es5的规则
然后其实你就可以利用babel去转换了
比如写一个test.js 里面是 es6的语法
然后 可以在cmd里 输入 babel test.js 你就会看到转换后的es5语法的样子 当然我们还希望将转换后的代码 变成文件
那么可以cmd后 输入 babel test.js --out-file test2.js 这样转换后的代码就变成了文件存在了当前目录下
当然 还有时候 你需要转换的不止一个文件 我们要批量转换的时候 可以转换整个文件夹
那么可以cmd后输入 babel 文件夹名 --out-dir 文件夹名 就会整个转换了 别忘了先建立要存放js的目标文件哦
这里单个文件转换 可缩写为 babel test.js -o test2.js
文件夹转换 可所写为 babel 文件夹名 -d 文件夹名
后话 当然我上面初始的cnpm init的package.json文件并没有使用 因为 我将 我的babel-cli 和 es2015都下载到了全局里
我们也可以下载到当前项目里 那么此时package.json就会记录这些模块的版本
还有 上面我只使用了es2015的模块 我们还可以使用很多
比如 react的转换模块 cnpm install babel-preset-reack
比如es7的转换模块 cnpm install babel-preset-stage-0/1/2/3 (0123选择一个,分别代表4个阶段)
当然 如果你是一个webpack的使用者,或者其他前端打包工具的使用者 你可以不单独使用babel 他们都集成在了这些打包工具里 你可以去学习了