Babel

作者: Lisa_Guo | 来源:发表于2020-06-11 10:34 被阅读0次

    Babel是什么

    Babel在现代前端开发中起着基石的作用,负责将高级js语法转换成浏览器支持的语法。

    Babel由什么组成

    @babel/core: babel核心代码
    @babel/cli:babel的命令行工具
    @babel/pollyfill:针对浏览器的补丁
    plugin:babel通过插件完成实际的转换工作,不同插件完成不同格式的转换
    preset: 预置的插件集合,方便用户使用
    config file:babel基于用户定制的配置文件完成转换

    配置的几种方式

    babel有两种级别的配置文件:
    项目级: 'babel.config.json',针对整个项目进行配置
    文件级:‘,babelrc.json’, 可单独针对文件进行配置

    1. babel.config.json
      放在根目录下(package.json同级目录),管理整个项目配置
    {
      "presets": [],
      "plugins": []
    }
    
    1. .babelrc.json
      可放在根目录或子目录下,对单独的目录进行定制
    {
      "presets": [...],
      "plugins": [...]
    }
    
    1. bable.config.js
      该种方式可以在js中添加Nodejs的代码,更加方便的定制配置
    module.exports = {
      "presets": [],
      "plugins": []
    }
    

    如:针对不用环境进行配置

    const presets = [ ... ];
    const plugins = [ ... ];
    
    if (process.env["ENV"] === "prod") {
      plugins.push(...);
    }
    
    module.exports = { presets, plugins };
    

    或调用api

    module.exports = function (api) {
      api.cache(true);
    
      const presets = [ ... ];
      const plugins = [ ... ];
    
      return {
        presets,
        plugins
      };
    }
    
    1. package.json
    {
       "name": “my project”,
       "babel"L {
           "presets": [...],
           "plugins": [...]
        }
    }
    

    注:babel支持的文件类型有.json, .js, .cjs, .mjs

    相关文章

      网友评论

          本文标题:Babel

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