Babel 7 升级实践 | HK Talk

hhking commented 5 years ago

https://blog.hhking.cn/2019/04/02/babel-v7-update/

缘起最近在看项目的升级和优化，项目用的是 babel 6，踩了一下升级到 babel 7 的坑。

WeiGrand commented 5 years ago

深度好文

hhking commented 5 years ago

@WeiGrand 深度好文

深度好评

lonsunFC commented 5 years ago

大佬，求一个完整的栗子啊~

hhking commented 5 years ago

@lonsunFC 大佬，求一个完整的栗子啊~

这个 .babelrc 就是个配置的例子了

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 2,
        "targets": {
          "ie": 10
        }
      }
    ]
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime"]
  ]
}

lonsunFC commented 5 years ago

其实我是不知道的是这个问题 https://segmentfault.com/q/1010000019028457 直接用babel转换的文件怎么使用？

hhking commented 5 years ago

@lonsunFC 其实我是不知道的是这个问题 https://segmentfault.com/q/1010000019028457 直接用babel转换的文件怎么使用？

babel 装换之后的 js 就和普通的 js 一样使用。但是 babel 不包含模块管理（require/import），所以要么在支持的环境比如 node 或者新的浏览器里执行，要么要借助 webpack 之类的工具处理

bravelincy commented 5 years ago

想问一下，babel7对应的babel-runtime里把polyfill的功能去掉了，那么在开发npm包时怎么能够实现不污染全局环境的polyfill呢，之前transform-runtime插件可以做到，现在不知道怎么搞了

hhking commented 5 years ago

@chillyond 想问一下，babel7对应的babel-runtime里把polyfill的功能去掉了，那么在开发npm包时怎么能够实现不污染全局环境的polyfill呢，之前transform-runtime插件可以做到，现在不知道怎么搞了

试试这样配置插件：

["@babel/plugin-transform-runtime", {
      "corejs": 3
 }]

"corejs" 默认值 false，会污染全局

2 的话新语法通过 helper 的方式引入，不会污染全局，但是 api 会污染全局

3 的话应该都不会。

bravelincy commented 5 years ago

@hhking 我使用corejs: 3的方式进行polyfill，还是污染到全局环境了，网上也看到有人说3不会污染，我就很好奇实例方法上的api是怎么实现的，但是没试成功，请问是一定要配合runtime使用吗？我的babel是这样配置的:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "55",
          "ie": "9"
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

hhking commented 5 years ago

@chillyond @hhking 我使用corejs: 3的方式进行polyfill，还是污染到全局环境了，网上也看到有人说3不会污染，我就很好奇实例方法上的api是怎么实现的，但是没试成功，请问是一定要配合runtime使用吗？我的babel是这样配置的:
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "55",
          "ie": "9"
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

你这样是肯定会污染的，要配合 @babel/plugin-transform-runtime 使用

bravelincy commented 5 years ago

@hhking 确实是这样，之前看了一些旧文档，好不容拼凑出来一点点的babel观，又被babel7给颠覆了。。

tylerrrkd commented 5 years ago

大佬！俺的配置长这样（既不污染全局，也能使用实例特性）

 "presets": [
    [
      "@babel/preset-env",
      {
        "modules": "cjs",
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        // corejs: 3 also supports instance properties (e.g. [].includes)
        // https://babeljs.io/docs/en/next/babel-plugin-transform-runtime.html#corejs
        "corejs": {
          "version": 3,
          "proposals": true
        },
        // 保留ESModules，交给preset-env去处理modules
        "useESModules": true
      }
    ],
  ]

但是，很神奇的是，用ie11打开，还是提示Promise undefined

hhking commented 5 years ago

@tylerrrkd 我猜是因为 webpack。webpack 的异步加载依赖 promise，promise 要全局

tylerrrkd commented 5 years ago

@hhking 解决了。Thx

`.babelrc`

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": "cjs",
        "useBuiltIns": "usage",
        "corejs": 3,
        "targets": {
          "ie": 11
        }
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        // corejs: 3 also supports instance properties (e.g. [].includes)
        // https://babeljs.io/docs/en/next/babel-plugin-transform-runtime.html#corejs
        "corejs": {
          "version": 3,
          "proposals": true
        },
        // 保留ESModules，交给preset-env去处理modules
        "useESModules": true
      }
    ],
  ]
}

入口文件`index.js`

import "core-js/stable";
import "regenerator-runtime/runtime";

Marszht commented 2 years ago

特意登录来赞大佬

hhking / hhking.github.io