dualwield / blog Goto Github PK

背景：我们的网站是跑在app内的webview，测试手机（安卓6，chrome版本42，以下简称手机）无法打开本地环境

控制台报错:
unexpected token =>

这个很好理解，因为箭头函数属于es6的语法，在chrome42里面并不支持，但是我的代码应该通过babel编译了才对，所以我去寻找babel的配置

研究了一圈，发现babel的@babel/preset-env 就是会根据browserslist来配置你的polyfill。而我的browserlist长这样:

"browserslist": {
    "production": [
      "chrome 39",
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

原因就是babel会根据BABEL_ENV || NODE_ENV来判断环境。所以这里我改成:

"browserslist": [
    "chrome 39",
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],

试下来还是不行，弄了好久，最后发现是babel-loader设置了缓存= =

                // This is a feature of `babel-loader` for webpack (not Babel itself).
                // It enables caching results in ./node_modules/.cache/babel-loader/
                // directory for faster rebuilds.
                cacheDirectory: true,

删掉缓存之后。查看代码发现自己的代码箭头函数已经都转义了，但是还是有一些代码里面有箭头函数，查看了下是node_modules里面代码。

下一个问题就是如何让node_modules里面代码也经过babel转码。

首先找到babel-loader的配置，把include改成包含 src 以及node_modules， 还需要注意你babel配置文件的写法，babel7现在分为Project-wide configuration跟File-relative configuration， 具体见 https://babeljs.io/docs/en/config-files#project-wide-configuration 。所以我们要把babel的配置抽出来，写一个babel.config.json。

还要配置babel-loader的options， 告诉他配置文件的位置，使用

configFile: path.resolve(__dirname, '../babel.config.json'),

以上，就大功告成了