webpack 打包将 ES6 转 ES5 问题

问题描述

在部署完项目之后，自己浏览器访问正常，测试的浏览器会报以下的问题

看了一下，发现是 ES6 的语法，拓展运算符。

然后测试的浏览器版本是：

自己的浏览器版本是：

那么基本上可以确定是 ES6 解析的问题

问题解决

看了一下自己的 babel-loader 的配置

{
    test: /\.js$/,
    loader: 'babel-loader',
    include: [
        resolve('src'),
        resolve('test'),
        resolve('node_modules/webpack-dev-server/client')
    ]
}

讲道理，源码都应该有转了。。再具体定位一下问题吧？

看了一下打包出来的代码，发现来自于公司内部的一个框架。突然想起之前为了调试方便，直接引入了源码。

而源码的目录又不在处理的范围之内。

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
        '@': resolve('src'),
        'vue': resolve('node_modules/vue'),
        '@ams/ams': path.resolve(__dirname, '../ams/src/index')    // 直接引用了源码，目录不在范围之内
    }
}

好的，找到问题根源了，直接将上面的注释掉，它就会自动去 node_modules 中查找了，那就属于我们转换的范围之内了。

如下所示

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
        '@': resolve('src'),
        'vue': resolve('node_modules/vue')
        // ,
        // '@ams/ams': path.resolve(__dirname, '../ams/src/index')    // 直接引用了源码，目录不在范围之内
    }
}