babel 打包整理

今天一天在解决兼容的问题。走势图里面有的手机打不开。因为这个项目一开始就没用react, umijs 这些已经直接上手写业务逻辑的库。然后就需要自己打包，自己编译es6变成es5. 编译之后移动到指定目录下。很（快）是（崩）享（溃）受（了）没办法，没有前端工程师，不懂webpack 也只能硬上。 遇到一堆问题。还好问题解决了，这里整理一下。

出问题的是苹果手机。无奈我的电脑是window系统的，配置了一个ios-webkit-debug-proxy-win64, 一点用都没有。只能呲着脸让安卓开发给我调试。出现的bug大概一看都是es6的语法问题。都不识别。我又不能把代码给改回去，那么多代码也不是说改就改的。那就得转成es5来兼容老的浏览器。

因为踩了很多坑。这里整理一下：

安装版本

babel 打包最好采用版本6的，也就是babel-core^6*.*,babel-preset-env^6*.*, babel-cli^6*.*
之类的。 我选择的是版本7.

    "babel-core": "^7.0.0-bridge.0",   # 这个是安装babel7 才需要的。
    "babel-loader": "^7.1.4",
    "babel-polyfill": "^6.26.0"
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/cli": "^7.0.0"

这里babel-cli, babel-core, babel-preset-env 可不要混着装，否则会出问题了。我在这上面都饶了好久
babel7 对于解构赋值还支持的不好，比如你会遇到这样的。
https://github.com/facebook/react-native/issues/21734

配置应该怎么配置呢？

首先你应该创建一个.babelrc来存储配置。

{
    "presets": [
      ["@babel/preset-env", {
        "targets": {
          "browsers": ["Android >= 5.0", "ios >= 9"]
        },
        "useBuiltIns": true,
        "debug": true,
      }],
    ],
    "env": {
      "production": {
        // "plugins": ["transform-react-remove-prop-types", ["recharts"]]
        "plugins": ["transform-runtime"]
      }
    }
}

我这里只是给一个例子，对我有用的，无非是@babel/preset-env, useBuiltIns, env里面的plugins也用的不多。

上面只是第一步，弄完之后，你还需要在webpack.conf.js里面加上规则。

  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: [/(node_modules|bower_components)/, path.resolve(__dirname, 'public/graph_hardcoded_config.js')],
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },

这里的需要解释一下， test里面就是匹配到的文件，这些文件要做es转码。 而exclude是不需要的转的文件，这个优先级比较高。我们可以把node_modules 这个文件夹给放进来。 当然，我这里还单独剔除一个文件，要不实在是太难搞了。这个文件就不能有任何的es6语法，否则也会出现问题。 剔除的时候，需要选择绝对路径。 然后到use, 这里用的babel-loader, 我隐约觉得我这里配重了。但是我还是留着了。时间比较紧，后面有空再详细学习一下。

我遇到了很多问题，都是与babel相关的， main里面的报错， 还是得看报错的位置，找到报错，如果实在定位不到代码，就直接搜，正常会有人遇到类似的问题，然后照着做一下，如果能定位代码，直接看是什么问题，修改。 遇到的Symbol is not defined 的问题。还安装了babel-polyfill.

cnpm install --save-dev babel-polyfill
#在报错的文件最上面，引入
import 'babel-polyfill' ## 就可以了

https://github.com/babel/babel-preset-env/issues/203
https://github.com/webpack/webpack/issues/2031
https://juejin.im/post/5c947c3b6fb9a070f1257f7a
https://segmentfault.com/a/1190000008706628

babel 入门教程
https://www.kancloud.cn/digest/babel/217105

今日整理：

wepack 东西比较多，babel也没有静下心去看，babel版本比较多，没有看官方文档，直接照着别人的博客就去操作， 试一试不行，试一试不行就有点慌。感觉很难。特别是下午，真的有点崩溃，因为兼容老的浏览器引入的问题确实很多，而且ios是在同事电脑上挑的，一会让同事刷一下，一会让同事刷一下，真的是很抱歉。当同事说让我找个电脑调试的时候，我对着问题想半天，调完了才让同事刷，代码检查很多遍才敢让同事刷一下看新的问题。当我遇到解构赋值， 这里也列一下这个问题。 TypeError: Invalid attempt to spread non-iterable instance. 这个问题真的不知道该怎么该了，因为用这个的还比较多，当时不用这个，我就得换babel版本，换完之后，就可能会引入其他的问题。然后就参考安卓上遇到的这个问题，一个一个改解构赋值，还好最后成功了。 需要学习的东西还很多，还是得沉住气，下次再弄，就要找官方文档，有个大概再搞，直接去弄，遇到问题不知所措，也会走很多弯路。不过这一遍乱七八糟的搞下来，再去看webpack, babel的文章，也就容易了起来。 加油！