为何要搭建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就可以了

巴特西

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

最新文章

热门文章