babel-loader配置_个人使用（仅供参考）

Harpsichord1207 发布于2019-08-23 16:31 / 3430人阅读

摘要：介绍把用最新标准编写的代码向下编译成可以在今天随处可用的版本。这主要是根据委员会发布流程来制定的。最终在阶段被标准正式采纳。也就是说这些包含的特性是比更新的特性但还未被写入标准进行发布。

Babel-loader介绍

Babel 把用最新标准编写的 JavaScript 代码向下编译成可以在今天随处可用的版本。 这一过程叫做“源码到源码”编译， 也被称为转换编译。

安装

npm i babel-loader -D

package.json 配置文件

    "babel-core": "^6.26.0",   // 核心包
    "babel-loader": "^7.1.2",   // 基础包
    
    "babel-preset-env": "^1.6.1",  // 根据配置转换成浏览器支持的 es5  
    
    "babel-plugin-transform-runtime": "^6.23.0",  //promise的转换
    "babel-preset-react": "^6.24.1", //react语法的转换
    "babel-plugin-import": "^1.6.3",  // import的转换 
    
    "babel-preset-stage-0": "^6.24.1", //babel-preset-stage-0 打包处于 strawman 阶段的语法）

接下来我详细解释一下这些配置的作用：

babel-loader的配置

.babelrc

在我们告诉 Babel 该做什么之前，你需要做的就是在项目的根路径下创建 .babelrc 文件。然后输入以下内容作为开始：

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

babel-preset-env

如果使用babel-preset-es2015,es2016,es2017包含了过多在某些情况下不需要的功能.
但使用babel-preset-env, 我们可以声明环境, 然后该preset就会只编译包含我们所声明环境缺少的特性的代码，因此也是比较推荐的方式。

安装babel-preset-env

 npm i babel-preset-env

添加配置

{
  "presets": ["env"]
}

指定所要支持的浏览器

指定支持主流浏览器最新的两个版本以及IE 7+:

 "presets": [
     [
       "env",
       {
         "targets": {
           "browsers": ["last 2 versions", "ie >= 7"]
          }
       }
     ]
 ]

支持超过市场份额5%的浏览器:

    "targets": {
      "browsers": "> 5%"
    }

某个固定版本的浏览器:

    "targets": {
      "chrome": 56
    }

更多配置参考官方文档：

babel-preset-stage-x
官方预设(preset), 有两种，一个是按年份(babel-preset-2017)，一个是按阶段(babel-preset-stage-0)。这主要是根据TC39 委员会ECMASCRPIT 发布流程来制定的。TC39 委员会决定，从2016年开始，每年都会发布一个版本，它包括每年期限内完成的所有功能，同时ECMAScript的版本号也按年份编制，就有了ES2016, ES2017。所以也就有了babel-present-2016, babel-preset-2017，对每一年新增的语法进行转化。babel-preset-latest 就是把所有es2015, es2016, es2017 全部包含在一起了。

最终在阶段 4 被标准正式采纳。
以下是4 个不同阶段的（打包的）预设：

babel-preset-stage-0

babel-preset-stage-1

babel-preset-stage-2

babel-preset-stage-3

注意 stage-4 预设是不存在的因为它就是上面的 es2017 预设。

以上每种预设都依赖于紧随的后期阶段预设，数字越小，阶段越靠后，存在依赖关系。也就是说stage-0是包括stage-1的，以此类推。也就是说这些stage包含的特性是比latest更新的特性但还未被写入标准进行发布。

使用的时候只需要安装你想要的阶段就可以了：

$ npm install --save-dev babel-preset-stage-2

然后添加进你的 .babelrc 配置文件。但是要注意如果没有提供es2017相关的预设，preset-stage-X 这种阶段性的预设也不能用。

babel-runtime
babel-polyfill解决了Babel不转换新API的问题，但是直接在代码中插入帮助函数，会导致污染了全局环境，并且不同的代码文件中包含重复的代码，导致编译后的代码体积变大。（比如：上述的帮助函数_defineProperty有可能在很多的代码模块文件中都会被插入）
Babel为了解决这个问题，提供了多带带的包babel-runtime用以提供编译模块的工具函数，启用插件babel-plugin-transform-runtime后，Babel就会使用babel-runtime下的工具函数，上述的代码就会变成这样

与 babel-polyfill 一样，babel-runtime 的作用也是模拟 ES2015 环境。只不过，babel-polyfill 是针对全局环境的，引入它，我们的浏览器就好像具备了规范里定义的完整的特性 – 虽然原生并未实现。

babel-runtime 更像是分散的 polyfill 模块，我们可以在自己的模块里多带带引入，比如 require(‘babel-runtime/core-js/promise’) ，它们不会在全局环境添加未实现的方法，只是，这样手动引用每个 polyfill 会非常低效。我们借助 Runtime transform 插件来自动化处理这一切。

通过安装 babel-plugin-transform-runtime 和 babel-runtime 来开始。
```
$ npm install --save-dev babel-plugin-transform-runtime
$ npm install --save babel-runtime
```
然后更新 .babelrc：
```
      {
        "plugins": [
          "transform-runtime"
        ]
      }
```

webpack 中定义 babel-loader

很少有大型项目仅仅需要 babel，一般都是 babel 配合着 webpack 或 glup 等编译工具一起上的。
为了显出 babel 的能耐，个人配用 babel-runtime 、支持 react 的webpack.config.js
先来配使用 babel-runtime 的：
首先安装：

npm install babel-loader babel-core babel-preset-es2015 babel-plugin-transform-runtime  babel-plugin-react-transform webpack --save-dev

npm install babel-runtime --save

然后配置:

module: {
  loaders: [{
    loader: "babel",
    test: /.jsx?$/,
    include: path.join(__dirname, "src"),
    query: {
      plugins: ["transform-runtime"],
      presets: [
        ["env", {
          "targets": {
            "chrome": 52
          },
          "modules": false,
          "loose": true
        }],
        "stage-2",
        "react"
      ],
    }
  }]
}

babel-cli

abel 的 CLI 是一种在命令行下使用 Babel 编译文件的简单方法。
让我们先全局安装它来学习基础知识。

$ npm install --global babel-cli

我们可以这样来编译我们的第一个文件：

$ babel my-file.js

这将把编译后的结果直接输出至终端。使用 --out-file 或着 -o 可以将结果写入到指定的文件。

$ babel example.js --out-file compiled.js
# 或
$ babel example.js -o compiled.js

如果我们想要把一个目录整个编译成一个新的目录，可以使用 --out-dir 或者 -d。.

$ babel src --out-dir lib
# 或
$ babel src -d lib

参考文章

《https://segmentfault.com/a/11...》

混合云私有云 linux使用参考书 babel-loader 个人如何使用个人使用教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103121.html

webpack从零开始第5课:模块篇

摘要：目录第课安装和第课配置文件第课做为的一个模块来使用第课插件篇第课模块篇第课在开发中使用本文参考文档官方模块配置模块配置中文翻译模块配置中文翻译版本官方内置清单第三方清单代码托管及用法配置官方文档模块总览我是首页万事开头 webpack目录第1课: 安装webpack和webpack-dev-server 第2课: 配置文件第3课: 做为node的一个模块来使用第4课: ...

tinylcy 2019-08-21 18:20 评论0 收藏0
webpack搭建多页面系统（三）理解webpack.config.js的四个核心概念

摘要：关于模板的有好几种。一次安装所有的大家可以了解一些的用法把编译成。安装参考文档功能将源文件迁移到指定的目录，返回新的文件路径。安装用法它会将所有的入口中引用的移动到和页面对应的独立分离的文件。 webpack是需要自己编写自己需要的一个配置对象，取决你如何使用webpack,下面指定了所有的可用的配置选项。参考文档：https://doc.webpack-china.org... we...

邹强 2019-08-21 18:43 评论0 收藏0
开发工具心得：如何 10 倍提高你的 Webpack 构建效率

摘要：在项目架构中这两个东西基本成为了标配，但的模块必须在使用前经过的构建后文称为才能在浏览器端使用，而每次修改也都需要重新构建后文称为才能生效，如何提高的构建效率成为了提高开发效率的关键之一。 0. 前言 showImg(https://segmentfault.com/img/remote/1460000005770045); 图1：ES6 + Webpack + React + Bab...

用户83 2019-08-19 18:35 评论0 收藏0
发布 react 组件到 npm 上

摘要：我发布了我的第一个组件，一个基于的标签云组件。然后将这个编译命令写到里，如下那么以后要编译下面的代码，只需要执行现在我们已经有编译好的代码了，接下来就可以发布到供其他人使用了。我发布了我的第一个 npm 组件，一个基于 react 的 3d 标签云组件。在这途中我也是遇到了很多的坑，花在完善整个发布流程的时间远多于写这个组件本身的时间，所以我记录下我觉得一个正常的 react 组件的...

Yi_Zhi_Yu 2019-08-23 15:05 评论0 收藏0
发布 react 组件到 npm 上

摘要：我发布了我的第一个组件，一个基于的标签云组件。然后将这个编译命令写到里，如下那么以后要编译下面的代码，只需要执行现在我们已经有编译好的代码了，接下来就可以发布到供其他人使用了。我发布了我的第一个 npm 组件，一个基于 react 的 3d 标签云组件。在这途中我也是遇到了很多的坑，花在完善整个发布流程的时间远多于写这个组件本身的时间，所以我记录下我觉得一个正常的 react 组件的...

张金宝 2019-08-05 16:10 评论0 收藏0