Babel in Vue

发表于 | 分类于 | | 阅读次数

Babel 是一个 JavaScript 编译器

Vue 的所有模块代码都是用了 ES6 的语法，可是大多数浏览器对 ES6 支持不够，所以需要先把源码（ES6）转化为浏览器能够识别执行的代码（ES5），而这个过程就需要用到 Babel 这个工具

简单例子

对照 Babel 的 官网 首页的指南简单玩一下：

  • 安装

安装 babel 命令行工具 （官网是在项目下安装，这里全局安装）

1
npm install -g babel-cli

这样就能在命令行下启动 babel

另外，我们还要告诉 babel 使用哪种转码规则，这里使用 ES2015 preset。在项目下创建 .babelrc 文件

1
2
3
{
  "presets": ["es2015"]
}

然后还要安装对应转码规则包

1
npm install --save-dev babel-preset-es2015
  • 测试

创建 js 代码文件 test.js：

1
2
3
4
5
6
var hello = () => {
  let name = 'peter'
  console.log('hello ' + name)
}
hello()

转换：

1
babel test.js --out-file test.compiled.js

生成 test.compiled.js

1
2
3
4
5
6
7
8
'use strict';
var hello = function hello() {
  var name = 'peter';
  console.log('hello ' + name);
};
hello();

现在就可以在浏览器运行这段代码了

更多关于 babel 或者 es6 的知识可以参考官网，或者还有下面中文网站：

vue 中使用

vue 中在构建代码的时候结合 webpack 和 babel 相关插件使用，。。。

//TODO 在 webpack 部分一起写

CC BY-NC-SA 3.0 CN

本著作采用 署名-非商业性使用-相同方式共享 3.0 中国大陆 署名-非商业性使用-相同方式共享 3.0 中国大陆 进行许可

欢迎转载，但转载请注明来自 zhenyong.site，并保持转载后文章内容的完整