babel配置
babel版本升级到8.x之后发现出现了很多问题.
首先需要安装

"@babel/core": "^7.1.2",
"@babel/plugin-transform-object-assign": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.1.0",
"@babel/preset-env": "^7.1.0",
"@babel/runtime": "^7.1.2",
"babel-loader": "^8.0.4"

因为babel8.x插件依赖这些插件.
因为我的项目需要兼容IE8 所以我的babel-loader 配置如下

{
test: /\.js$/,
include: dirVars.srcRootDir,
loader: 'babel-loader',
options: {
presets: [
[
"@babel/preset-env",
{
"targets": {
"browsers": ["ie >= 8"]
},
//"useBuiltIns": 'usage',
"modules": "commonjs"
}
]
],
cacheDirectory: true,
plugins: [
'@babel/plugin-transform-runtime', "@babel/plugin-transform-object-assign"
]
}
}

打包之后发现我的项目出错了,因为项目里有个js用了Object.assign()方法 所有报这个方法的错误.
以前webpack3 配置babel plugins: ['transform-runtime'],当时babel版本6.x直接就会转义这个方法.所以不会报错.
现在babel8.x 配置babel plugins: ['@babel/plugin-transform-object-assign']无效报错.
后来google后查找,发现了2种好的解决办法
第一种办法先安装"@babel/polyfill": "^7.0.0",
babel-loader 加配置"useBuiltIns": 'usage'
"useBuiltIns": 'usage' 的意思是对应的环境自动替换为所需的 polyfill。
详情看这篇文章https://juejin.im/entry/596309365188252ec3400aaf
这篇文章会介绍为什么不直接引入babel/polyfill.
第二种办法用@babel/plugin-transform-object-assign插件.
配置完成后,运行demo并且报错
Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
网上解决方法如下:
点开错误的文件,标注错误的地方是这样的一段代码:
import {normalTime} from './timeFormat';
module.exports={
  normalTime
};
就是module.exports;
百度查不到,google一查果然有。
原因是:The code above is ok. You can mix require and export. You can‘t mix import and module.exports.
翻译过来就是说,代码没毛病,在webpack打包的时候,可以在js文件中混用require和export。但是不能混用import 以及module.exports。
因为webpack 中不允许混用import和module.exports,
解决办法就是统一改成ES6的方式编写即可.
我的解决办法:
babel-loder配置加一行代码"modules": "commonjs"
这是因为这个配置环境下module 类型需要统一成一种,加这行代码后就搞定,还是可以随意用,并转义成功.

webpack4.0 babel配置遇到的问题的更多相关文章

  1. webpack4.0基本配置,超简单!

    最近复习了一下webpack,使用的是4.0版本. 下图是基本目录结构,最后留有代码地址,有兴趣可以去看看. 直接上代码(依赖未完全使用): 项目的所有依赖都可以安装,每个都有详细的注释.] cons ...

  2. web4.0基本配置

    const path = require('path');//引入路径包 const HWP = require('html-webpack-plugin');//引入自动产出html包 const ...

  3. 史上最走心webpack4.0中级教程——配置之外你应该知道的事

    <webpack4.0各个击破系列>适合不满足于只会配置webpack但一时间又看不懂源码的中级读者.我没法保证这个系列是最好的,但至少能保证每一篇博文都跟那些Ctrl+C和Ctrl+V的 ...

  4. [转]webpack4.0.1安装问题和webpack.config.js的配置变化

    本文转自:https://blog.csdn.net/jiang7701037/article/details/79403637 The CLI moved into a separate packa ...

  5. webpack4.0在Mac下的安装配置及踩到的坑

    一.什么是webpack是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.它做的事情是,分析你的项目结构,找到JavaScript模块以 ...

  6. webpack4.0.1安装问题和webpack.config.js的配置变化

    The CLI moved into a separate package: webpack-cli. Please install 'webpack-cli' in addition to webp ...

  7. webpack4.0各个击破(4)—— Javascript & splitChunk

    目录 一. Js模块化开发 二. Js文件的一般打包需求 三. 使用webpack处理js文件 3.1 使用babel转换ES6+语法 3.2 脚本合并 3.3 公共模块识别 3.4 代码分割 3.5 ...

  8. webpack4.0各个击破(6)—— Loader篇

    webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...

  9. 浅谈webpack4.0 性能优化(转)

    前言:在现实项目中,我们可能很少需要从头开始去配置一个webpack 项目,特别是webpack4.0发布以后,零配置启动一个项目成为一种标配.正因为零配置的webpack对项目本身提供的“打包”和“ ...

随机推荐

  1. Netty服务端启动过程相关源码分析

    1.Netty 是怎么创建服务端Channel的呢? 我们在使用ServerBootstrap.bind(端口)方法时,最终调用其父类AbstractBootstrap中的doBind方法,相关源码如 ...

  2. 解决:Navicat连接不上MySQL 8.0

    转载自 https://www.cnblogs.com/shiysin/p/shiysin.html Navicat连接不上,总是报错1251: 原因是MySQL8.0版本的加密方式和MySQL5.0 ...

  3. 不等"金九银十",金风八月,我早已拿下字节跳动的offer

    字节跳动,我是在网上投的简历,之前也投过一次,简历都没通过删选,后来让师姐帮我改了一下简历,重新投另一个部门,获得了面试机会.7月23日,中午HR打电话过来预约了下午4点半面试,说会在线写代码,让我准 ...

  4. js中判断一个对象的类型的种种方法

    javascript中检测对象的类型的运算符有:typeof.constructor.instanceof. typeof:typeof是一个一元运算符,返回结果是一个说明运算数类型的字符串.如:&q ...

  5. resolv.conf文件配置相关的案例

    引言 操作系统中/etc/resolv.conf配置文件中的内容一般为空,如果该文件配置不正确,将导致ssh.route.netstat命令响应慢的问题. 在/etc/resolv.conf添加错误地 ...

  6. 微服务与网关技术(SIA-GateWay)

    一.背景 软件架构,总是在不断的演进中... 把时间退回到二十年之前,当时企业级领域研发主要推崇的还是C/S模式,PB.Delphi这样的开发软件是企业应用开发的主流.随着时间的推移,基于浏览器的B/ ...

  7. 线性分类 Linear Classification

    软分类:y 的取值只有正负两个离散值,例如 {0, 1} 硬分类:y 是正负两类区间中的连续值,例如 [0, 1] 一.感知机 主要思想:分错的样本数越少越好 用指示函数统计分错的样本数作为损失函数, ...

  8. 神奇的 SQL 之温柔的陷阱 → 三值逻辑 与 NULL !

    前言 开心一刻   一个中国小孩参加国外的脱口秀节目,因为语言不通,于是找了一个翻译. 主持人问:“Who is your favorite singer ?” 翻译:”你最喜欢哪个歌手啊 ?” 小孩 ...

  9. linux后台运行的几种方式

    1.nohup将程序以忽略挂起信号的方式运行起来 补充说明nohup命令 可以将程序以忽略挂起信号的方式运行起来,被运行的程序的输出信息将不会显示到终端.无论是否将 nohup 命令的输出重定向到终端 ...

  10. JDK基础必备面试十问

    1. new一个对象在Java内部做了哪些工作? 从静态角度来看,new一个对象表示创建一个类的对象实例. 从JVM运行角度来看,当JVM执行到new字节码时,首先会去查看类有没有被加载到内存以及初始 ...