为何要搭建ES6开发环境，如何搭建ES6开发环境？

1、ES6需要搭建开发环境，原因是现在的Chrome浏览器已经支持ES6了，但是有些低版本的浏览器还是不支持ES6语法的，这就需要我们把ES6的语法自动转变成ES5的语法。   2、开始搭建环境     ①新建文件夹ES6，在文件夹ES6下新建两个文件夹src（书写ES6代码的文件夹，写的js程序都放在这里）和dist（利用Babel编译成的ES5代码的文件夹，在HTML页面需要引入的是这里的js文件），在ES6文件夹下创建index.html，在src中新建index.js文件，此处的index.js文件用ES6语法书写，而转换成的ES5语法在dist文件夹下的index.js中（这是通过开发环境转换的），所以index.html中js的引入是dist/index.js，如何转换请看下一步操作；     ②npm init -y    项目初始化命令，-y的作用是默认一次性生成package.json文件，不用人为干涉一步步操作。        cnpm install -g babel-cli 安装Babel         cnpm install --save-dev babel-preset-es2015 babel-cli 安装babel-preset-es2015（安装成功后，可以看一下我们的package.json文件，已经多了devDependencies选项）        在根目录下新建文件.babelrc文件，文件内容如下：

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

    ③ babel src/index.js -o dist/index.js  转换命令     ④每次转换，都需要输入babel src/index.js -o dist/index.js的话，比较麻烦，有什么解决办法呢？打开package.json文件，修改其中的内容

{
    "script":{
        "build":"babel src/index.js -o dist/index.js"
    }
}

    这样，每次需要转换时，只需要命令 npm run build就可以了

扫码关注我们

微信号：SRE实战

拒绝背锅 运筹帷幄