美文网首页
babel 使用

babel 使用

作者: 一米阳光kk | 来源:发表于2019-07-05 16:49 被阅读0次

    Babel 是什么?

    Babel 是一个 JavaScript 编译器

    Babel 是一个工具链,主要用于将 ECMAScript 2015+ (ES6+)版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情:

    • 语法转换
    • 通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)
    • 源码转换 (codemods)

    Babel 通过语法转换器来支持新版本的 JavaScript 语法。

    Babel用法

      1. 方法一:引入js文件
    <script src="browser.min.js" charset="utf-8"></script>
    <script type="text/babel">
        let a = 1;
            let show = s => s + 1;
    
            alert(show(a));
    </script>
    

    引入browser.min.js的作用是使浏览器支持babel,可以使用ES2015+的语法,注意script的type类型是text/babel,标准的浏览器无法解析这种类型的脚本,但是引入browser.min.js转换js文件后,会根据该类型将script内容执行语法转换,从而兼容低版本浏览器(IE6应该是没救了)

    使用这种方式有个缺点, 就是babel需要执行js语法转换,故页面加载会相对慢些

      1. 方法二:编译js文件
    1. 安装node.js , 初始化项目
    npm init -y
    
    1. 安装babel-cli
    npm i @babel/core @babel/cli @babel/preset-env -D
    
    npm i @babel/polyfill -S
    

    @babel/core babel核心代码库
    @babel/cli babel命令库
    @babel/preset-env babel预设编译项
    @babel/polyfill babel兼容处理

    1. package.json文件添加执行脚本
    "scripts": {
        "build": "babel src -d dest"
    }
    
    1. 添加.babelrc配置文件
    {
        "presets": ["@babel/preset-env"]
    }
    
    1. 执行编译
    npm run build
    
    1. demo案例
      demo 结构如下:


      image.png

    package.json文件源码:

    {
      "name": "babel",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "build": "babel src -d dest"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "@babel/cli": "^7.5.0",
        "@babel/core": "^7.5.0",
        "@babel/preset-env": "^7.5.0"
      }
    }
    
    

    .babel 源文件:

    {
        "presets": ["@babel/preset-env"]
    }
    

    a.js 脚本文件

    let a = 1;
    let show = s => s + 1;
    alert(show(a));
    
    

    index.html文件:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
      </head>
      <body>
        <script type="text/javascript" src="dest/a.js">
        </script>
      </body>
    </html>
    

    最终运行效果:


    image.png

    相关文章

      网友评论

          本文标题:babel 使用

          本文链接:https://www.haomeiwen.com/subject/oybehctx.html