webStrom Es6转Es5

2018-12-05 本文已影响0人静默授权

一、安装依赖

安装nodeJs(官网：http://nodejs.cn/) 依赖通过node命令安装

/** -i 安装(install简写)
  * -g 安装到全局环境(globals简写)
  * -S 安装到生产环境(--save简写)
  * -D 安装到开发环境(--save-dev简写)
  * --save 安装到生产环境
  * --save-dev 安装到开发环境
  */

安装 babel-cli

npm install babel-cli --save-dev

安装 babel-preset-env

npm install babel-preset-env --save-dev

二、配置babel

在根目录下创建.babelrc文件(安装依赖时会自动生成package.json配置文件，些文件所在为根目录)

{
"presets": [
"env"
  ]
}

配置webStrom

首先确认webStrom javaScript设置格式为ES6

操作路径为 Settings->Languages & Frameworks中选择Javascript选项，versin版本选择为ECMAScript6(或或打开Settings在搜索框中搜索Javascript)

添加babel监听

操作路径为 Settings->Tools->File Watchers(或打开Settings在搜索框中搜索File Watcher)

program：babel路径
全局安装默认设置
自定义安装 node_modules.bin\babel.cmd
Arguments：babel格式
$FilePathRelativeToProjectRoot$ --out-dir dist --source-maps --presets env
$FilePathRelativeToProjectRoot$ 相对于项目根目录的文件路径
--out-dir 输出位置
dist 输出文件夹名(层级与当前层级相同)
--source-maps 源地图
--presets 预置输出文件排版格式
env 输出文件排版格式
output paths to refresh:源地图输出设置
dist$FileDirRelativeToProjectRoot $\$ FileNameWithoutExtension $.js:dist\$ FileDirRelativeToProjectRoot $\$ FileNameWithoutExtension $.js.map$ FileDirRelativeToProjectRoot $相对于项目根目录的文件路径$ FileNameWithoutExtension$ 没有扩展名的文件名

如果报错有未安装的错误，请尝试删除要目录的node_modules文件，从新安装一下

npm install