Babel-loader,babel-core和babel-preset之间是什么关系

江枫思渺然 提交于 2019-11-30 18:12:45

`babel-loader` 是一个 npm 包,它使得 webpack 可以通过 babel 转译 JavaScript 代码。

(在 babel 7 中 `babel-core` 和 `babel-preset` 被建议使用 `@babel` 开头声明作用域,因此应该分别下载 `@babel/core` 和· `@babel/presets`。

就类似于 vue-cli 升级后 使用@vue/cli一样的道理 )

babel 的功能在于「代码转译」,具体一点,即将目标代码转译为能够符合期望语法规范的代码。在转译的过程中,babel 内部经历了「解析 - 转换 - 生成」三个步骤。而 `@babel/core` 这个库则负责「解析」,具体的「转换」和「生成」步骤则交给各种插件(plugin)和预设(preset)来完成。

`@babel/preset-*` 实际上就是各种插件的打包组合,也就是说各种转译规则的统一设定,目的是告诉loader要以什么规则来转化成对应的js版本

---

.babelrc示例
{

  "presets": [

    [

      '@babel/preset-env',

      {

        'target':{

          "browser":["ie>=8","chrome>=62"],

          "node":"8.9.0",

          "safari":"tp"

        },

        "modules":false,

        "debug":true,

        "uglify":true

        "useBuiltIns":true

      }

    ]

  ]

}

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!