babel vendor.js报错"Unexpected strict mode reserved word"

错误描述:

背景:Vue项目,由webpack和babel框架构建,iphone5s的ios8.2系统和android 5.0及以下系统,打开页面空白,调试显示dom未渲染,vendor.js报错"Unexpected strict mode reserved word"。
原因:vendor.js报错定位到“let”关键字上,因为let在es5中并不是关键字,无法识别,但是在严格模式下视为保留字,而低版本的webview明显将let认为是一个变量而不是关键字。所以,到node_modules目录找到报错文件,是引了第三方pinyin这个node包,未babel的文件交给了node_modules。这也不怪作者偷懒,使用文档中已经说明了,客户端使用,要兼容低版本浏览器,https://github.com/hotoo/pinyin

babel vendor.js报错
客户端使用,要兼容低版本浏览器

分析[Why]
诶,node_modules不是都应该有babel吗?哪来的let呢?项目的webpack相关配置如下:

loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        include: [
          path.join(projectRoot, 'src')
        ],
        exclude: /node_modules/
      },

babel-loader把node_modules目录排除在外了,所以问题的解决办法是把pinyin这个node包babel一下。
解决思路:
1,将相关的需要babel编译js文件include进来(没有解决)

loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        include: [
          path.join(projectRoot, 'src'),
          path.join(projectRoot, 'node_modules/pinyin')
        ],
        exclude: /node_modules/
      },

2,不把全部node_modules排除,可以忽略一些第三方包不被排除(没有解决)

loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        include: [
          path.join(projectRoot, 'src')
        ],
        exclude: /node_modules\/(?!pinyin)/
      },

3,babel编译js文件include进来,同时node_modules要exclude的第三包,忽略掉(问题解决)

loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        include: [
          path.join(projectRoot, 'src'),
          path.join(projectRoot, 'node_modules/pinyin')
        ],
        exclude: /node_modules\/(?!pinyin)/
      },

以下是另外一个网友提供的思路:

这是由于IE或低版本webview不认识ES6语法当中的let、箭头函数等一些新特性导致的。虽然你用了babel,但是babel缺省设置中的一项exclude: /node_modules/是把node_modules下的文件排除在外的,因为node_modules中有很多文件,如果每次都babel的话,编译时间会非常长,所以babel要求这些模块提供厂商在dist文件夹下应该放入babel之后的文件,但是有些模块厂商偷懒或者什么原因,把未经babel的文件交给了node_modules,这样就混入了ES6语法,例如箭头函数等,node_modules编译之后的结果是vendor.js,所以你会看到错误出现在vendor.js里。

解决方法之一是试图找出到底是哪个依赖包导致混入了ES6语法,然后把这个包从exclude中再排除出去,例如exclude: /node_modules\/(?!pinyin)/就是把模块名中包含有pinyin字符串的包排除出忽略名单,也就是让babel对node_modules中的qs文件也进行编译。

所以最好的方法还是找一下到底这段代码来自哪个包,而不是对node_modules下的所有包都进行babel编译,而且这种编译可能会导致更加大的副作用。

你可能感兴趣的:(babel vendor.js报错"Unexpected strict mode reserved word")