ES6 环境的搭建

版权声明:本文为博主原创文章,转载请注明出处 https://blog.csdn.net/zhang_z_ming/article/details/84584575

安装babel

npm install --g babel-cli

在项目目录下输入

npm init -y

会自动创建package.json文件

babel src/index.js -o dist/index.js

你会发现,在dist目录下确实生产了index.js文件,但是文件并没有变化,还是使用了ES6的语法。因为我们还需要安装转换包才能成功转换

本地安装babel-preset-es2015 和 babel-cli

cnpm install --save-dev babel-preset-es2015 babel-cli 很慢

安装完成后,我们可以看一下我们的package.json文件,已经多了devDependencies选项。

"devDependencies": { "babel-cli": "^6.24.1", "babel-preset-es2015": "^6.24.1" }

新建.babelrc

在根目录下新建.babelrc文件(注意,以点开头的文件是隐藏文件,需要在linux环境通过命令创建),并打开录入下面的代码

{

"presets":[

"es2015"

],

"plugins":[]

}

这个文件我们建立完成后,现在可以在终端输入的转换命令了,这次ES6成功转化为ES5的语法。

babel src/index.js -o dist/index.js

简化转化命令

在学习vue 的时候,可以使用npm run build 直接利用webpack进行打包,在这里也希望利用这种方式完成转换。打开package.json文件,把文件修改成下面的样子。

{

"name": "es6",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

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

},

"keywords": [],

"author": "",

"license": "ISC",

"devDependencies": {

"babel-cli": "^6.24.1",

"babel-preset-es2015": "^6.24.1"

}

}

修改好后,以后我们就可以使用 npm run build 来进行转换了。

猜你喜欢

转载自blog.csdn.net/zhang_z_ming/article/details/84584575