具体内容可以看babel的中文官网,这么讲述一下环境安装及基本使用。 本人的mac电脑,用mac的方式讲述: 前提:没有node.js环境的 先安装一下node.js 1,打开终端,cd进一个空的文件夹,创建一个babel项目,在终端输入 如果需要输入项目信息的话就输入
npm init
然后填入信息 继续按enter,如果不需要填写项目信息就走下面的命令:
npm init -y
2,然后安装babel开发环境(去掉dev 就是生产)
npm install --save-dev babel-cli
安装一个babel的依赖 终端输入:
npm i -D babel-preset-env
安装一个转化类的属性插件
npm i -D babel-plugin-transform-class-properties
在终端创建一个配置文件 名字不能改变
touch .babelrc
.babelrc填入 兼容到最新的浏览器和插件的配置
{
"presets": [
[
"env",
{
"targets": {
"browsers": ["last 1 version"]
}
}
]
],
"plugins": ["transform-class-properties"]
}
package.json文件中devDependencies 描述的是开发环境中安装的依赖。 我们需要在package.json里的scripts中添加一项:
"build": "babel entry.js -o index.js -w"
这句的意思是把entry.js的代码输出到index.js,-w是自动编译的简写。 在项目中创建三个文件:
entry.js 用于写es6代码, index.js es6转换后输出的代码 index.html 入口文件 用script标签引入index.js文件
在entry.js写入一些es6代码
class Car{
static total_car = 0;
color = '#000';
constructor(color){
Car.total_car += 1;
this.color = color;
}
}
new Car();
new Car();
new Car();
console.log(Car.total_car);
然后在终端运行
npm run build
然后就可以看到index.js里面是转换后的代码了 再用浏览器打开index.html也可以看到打印结果