babel的使用(一)

发布时间:2019-08-12 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了babel的使用(一)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

Babel 入门

http://www.ruanyifeng.com/blo...

Babel packages

https://github.com/babel/babe...

谈谈Babel v6的新特性及未来定位

http://www.open-open.com/lib/...

Babel 在线转换

https://babeljs.io/repl/

Babel 使用指南

http://guoyongfeng.github.io/...

1. Babel core 浏览器环境

安装: npm install --save-dev babel-core@5

2. 命令行转码babel-cli

安装: npm install --save-dev babel-cli

改写package.json

{
  // ...
  "devDePEndencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build": "babel src -d lib"
  },
}

转码的时候,就执行下面的命令。

npm run build

实例

package.json

{
  "name": "es6-sec",
  "version": "1.0.0",
  "description": "",
  "reposITory": "",
  "license": "",
  "readme": "",
  "scripts": {
    "build": "babel src -d asset"
  },
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-PReset-es2015": "^6.18.0"
  }
}

.babelrc

{
  "presets": ["es2015"],
  "plugins": []
}

js

// 变量,常量
function test() {
    let a = 10;
    const b = 20;
    console.LOG(a);
    console.log(b);
}
test();

// 数组的解构赋值
function example() {
    return [1, 2, 3];
}
VAR [a, b, c] = example();
console.log('a:' + a);
console.log('b:' + b);
console.log('c:' + c);

// 对象的解构赋值
function examples() {
    return {
        foo: 1,
        baz: 2
    };
}
var {foo, baz} = examples();
console.log('foo:' + foo);
console.log(baz);

var input = [1, 2, 3];
input.map(item => item + 1);

htML

<!DOCTYPE html>
<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>es6-sec</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
</head>
<body>
<script type="text/javascript" src="asset/index.js"></script>
</script>
</body>
</html>

脚本宝典总结

以上是脚本宝典为你收集整理的babel的使用(一)全部内容,希望文章能够帮你解决babel的使用(一)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。