前言

​ 最近开始接触了前端部分,要先利其事必先利其器,前后端开发人员都会选择一款适合的开发工具来作为高效的生产工具,后端我使用的是IntelliJ IDEA,使用这款开发工具的原因很简单,好东西!

​ 接触前端的时候最开始我相信大家都是Hbuilder,Hbuilder X 等工具,慢慢的转换为微软的Visual studio Code。

今天主要说的是我在前端使用ES6的时候遇到的个问题,安装Babel后查看版本出错

接下来看下这个错误

一、错误内容

PS E:\Demo> npm install -g babel-cli		 # 全局安装
PS E:\Demo> npm install -save-dev babel-cli					# 或者本项目安装
PS E:\Demo> babel --version							#查看版本号
babel : 无法加载文件 D:\nodejs\node_global\babel.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Exec
ution_Policies。
所在位置 行:1 字符: 1
+ babel --version
+ ~~~~~
    + CategoryInfo          : SecurityError: (:) [],PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

二、解决方法

1.查看 get-ExecutionPolicy

PS E:\Demo> get-ExecutionPolicy
Restricted(表示有限制的)

2.改为 set-ExecutionPolicy RemoteSigned 再次查看

PS E:\Demo> get-ExecutionPolicy
RemoteSigned

3.然后再查看版本 babel --version(双斜杠)

PS E:\Demo> babel --versio
6.26.0 (babel-core 6.26.3)

4.测试新建一个.babelrc文件,配置文件内容

{
  "presets": [], //设置转码规则
  "plugins": []  //设置插件
}

5.我们可以根据官方提供的规则集来进行安装

# ES2015转码规则
npm install --save-dev babel-preset-es2015

# react转码规则
npm install --save-dev babel-preset-react

# ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
npm install --save-dev babel-preset-stage-0
npm install --save-dev babel-preset-stage-1
npm install --save-dev babel-preset-stage-2
npm install --save-dev babel-preset-stage-3

6.将规则加入.babelrc

{
    "presets": [
      "es2015"
    ],
    "plugins": []
  }

7.改写package.js

{
  //...
  "devDependencies": {
    "babel-cli": "^6.0.0"  //安装时候的版本号,安装的时候一般会自动写入
  },
  "scripts": {
    "build": "babel src -d lib" 
    //编译整个 src 目录并将其输出到 lib 目录。
    //这里的src指的是需要转换的目录,lib指的是输出的内容的存放目录
  },
}

8.转码

npm run build