在项目中使用babel

BABEL

做项目的时候，没有考虑到使用新技术会产生的一些问题，比如使用es6新功能，导致很多浏览器不兼容（尤其是ie）。

babel的介绍

Babel 是一个编译器。 从宏观角度看，它将运行代码分为3个阶段: 解析，转换，及生成(与其他编译器相同).

babel的使用

官网提供的配置

1. 根据自己项目需要，选择相应的工具(本次使用webpack演示)
2. 安装

npm install --save-dev babel-loader babel-core

1. 使用
   
   • 通过config方式
     
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
}

   • 通过 loader 方式
     
var Person = require("babel!./Person.js").default;
new Person();

2. 创建 .babelrc 配置文件

虽然已经配置好了 Babel ，但并没有让它真正生效。在项目的根目录中创建一个 .babelrc 文件并启用一些插件。首先，你可以使用转换 ES2015+ 的 env preset 。

npm install babel-preset-env --save-dev

为了让 preset 生效，你需要像下面这样定义你的 .babelrc 文件：

{
  "presets": ["env"]
}

注意: 因为 npm 2.x 下载依赖的关系，在使用 npm 2.x 运行 Babel 6.x 的项目时，可能会引起性能问题。 你可以通过切换到 npm 3.x 或在 npm 2.x 上使用 dedupe 选项来解决这个问题。查看 npm 版本你可以运行如下命令:

npm --version