美文网首页
webpack 打包将 ES6 转 ES5 问题

webpack 打包将 ES6 转 ES5 问题

作者: Gopal | 来源:发表于2019-03-11 18:08 被阅读0次

    问题描述

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

    看了一下,发现是 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')    // 直接引用了源码,目录不在范围之内
        }
    }
    

    相关文章

      网友评论

          本文标题:webpack 打包将 ES6 转 ES5 问题

          本文链接:https://www.haomeiwen.com/subject/klabpqtx.html