babel使用--把ES6代码转化成可兼容的代码

208 阅读1分钟

具体内容可以看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也可以看到打印结果