直接使用 babel 命令行工具构建 SDK 开发环境

我们在进行日常的前端开发时可能会借助create-react-app,vue-cli或是webpack之类的构建工具，这些工具将我们从繁杂的环境配置中解放出来，从而将精力集中到业务逻辑的开发上来。但是，如果你需要开发一个sdk，那么使用这些构建工具就显得有些笨重了。更好的方式是直接使用babel命令行进行release。

要想能够将ES6+转译成ES5或以下，我们需要依赖以下几个插件：@babel/cli, @babel/core, @babel/node, @babel/preset-env。

首先执行：

yarn add --dev @babel/cli @babel/core

其@babel/cli和@babel/core通常成对安装，用于在命令行引入babel。安装后就可以执行一些简单的babel命令了。例如在scripts下增加：

"release": "babel ./src/ -d ./lib"

这时，执行npm run release将会在同级目录的lib文件夹下生成转译之后的文件。

但是，这里仅限于较为早期版本的语法，如果src下的文件使用了最新的一些特性，那么在转译时将输出语法错误，这时轮到@babel/preset-env登场了！

yarn add --dev @babel/preset-env

同时，在根目录下新增.babelrc文件，并输入:

{
    "presets": [ "@babel/preset-env" ]
}

这时，我们的新特性语法也能顺利执行啦！

到这里就剩下发布了，由于我们要发布的是lib下的文件，因此需要对package.json下的入口文件进行修改：

"main": "lib/index.js",

之后只需要执行npm的发布流程即可完成了。

最后，在进行本地开发和测试时，我们可以使用@babel/node进行实时编译：

yarn add --dev @babel/node

新增scripts命令：

"dev": "babel-node app.js",

这时我们就能做到在node环境下使用各种炫酷的新特性了，如果想体验热更新效果，可以安装nodemon,

yarn add --dev nodemon

此时，修改scripts命令：

"dev": "nodemon --exec babel-node app.js"

大功告成！