08月18, 2019

babel踩坑记

上周同事碰到一个问题,就是IE11下报错。排查了一下,发现是query-string这个包,它的代码生成出来的结果是es6的,并没有转成es5

后来发现有一些包也有类似的情况,低点的版本是转了es5的,但最新的版本似乎都放弃了。

网上翻了一下,有一个issueUse Babel to compile to ES5

alt

话虽如此,但这种包确实很好用啊。

所以就开始想办法,尝试在js-loader里面包含那些未编译的三方库。

之前用的是.babelrc,死活不行。然后翻了babel7之后,才知道要用babel.config.js

alt

配置 Babel

问题还没完,有时候你的三方库不需要那么多的presetsplugins,所以可能要自己重新处理一下,类似如下的代码:

{
  test: /\.js$/,
  use: {
    loader: 'babel-loader',
    options: {
      babelrc: false,
      configFile: false,
      presets: ['@babel/preset-env']
    }
  },
  include: includes
}

这里我其实有一个疑问是关于浏览器版本的。

babel7browserList是这样来处理的:

alt

但我上面的代码最终是生成一个npm包,所以它是会怎样去读,现在不是太确定。。不过目前来说,暂时也没有碰到。

之前同事的做法是在html文件中加入了html5shim文件,这个问题以后碰到了再测试一下吧。个人感觉问题不大。

本文链接:www.my-fe.pub/post/babel-step-on-the-pit.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。