webpack4.0 babel配置遇到的问题
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配置遇到的问题的更多相关文章
- webpack4.0基本配置,超简单!
最近复习了一下webpack,使用的是4.0版本. 下图是基本目录结构,最后留有代码地址,有兴趣可以去看看. 直接上代码(依赖未完全使用): 项目的所有依赖都可以安装,每个都有详细的注释.] cons ...
- web4.0基本配置
const path = require('path');//引入路径包 const HWP = require('html-webpack-plugin');//引入自动产出html包 const ...
- 史上最走心webpack4.0中级教程——配置之外你应该知道的事
<webpack4.0各个击破系列>适合不满足于只会配置webpack但一时间又看不懂源码的中级读者.我没法保证这个系列是最好的,但至少能保证每一篇博文都跟那些Ctrl+C和Ctrl+V的 ...
- [转]webpack4.0.1安装问题和webpack.config.js的配置变化
本文转自:https://blog.csdn.net/jiang7701037/article/details/79403637 The CLI moved into a separate packa ...
- webpack4.0在Mac下的安装配置及踩到的坑
一.什么是webpack是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.它做的事情是,分析你的项目结构,找到JavaScript模块以 ...
- webpack4.0.1安装问题和webpack.config.js的配置变化
The CLI moved into a separate package: webpack-cli. Please install 'webpack-cli' in addition to webp ...
- webpack4.0各个击破(4)—— Javascript & splitChunk
目录 一. Js模块化开发 二. Js文件的一般打包需求 三. 使用webpack处理js文件 3.1 使用babel转换ES6+语法 3.2 脚本合并 3.3 公共模块识别 3.4 代码分割 3.5 ...
- webpack4.0各个击破(6)—— Loader篇
webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...
- 浅谈webpack4.0 性能优化(转)
前言:在现实项目中,我们可能很少需要从头开始去配置一个webpack 项目,特别是webpack4.0发布以后,零配置启动一个项目成为一种标配.正因为零配置的webpack对项目本身提供的“打包”和“ ...
随机推荐
- 以太坊RLPx传输协议
本文主要内容翻译自:The RLPx Transport Protocol,其中添加了一些个人的理解,由于密码学水平有限,不正确之处望指正.另外原文可能已经更新,最新内容请直接阅读原文. 本文档定义了 ...
- 灰度级分层(一些基本的灰度变换函数)基本原理及Python实现
1. 基本原理 灰度级分层通常用于突出感兴趣的特定灰度范围内的亮度.灰度级分层有两大基本方法. 将感兴趣的灰度范围内的值显示为一个值(比如0),而其他范围的值为另外一个值(255). 将感兴趣的灰度范 ...
- 为什么unsigned (-1)表示无符号整数的最大值
整数在计算机中的表示 在计算机中,整数采用补码表示.当前主流编译器中整型在内存中占用四个字节,共32位. 机器数:一个数在计算机中的二进制表示形式, 叫做这个数的机器数.机器数是带符号的,在计算机用一 ...
- 自己学习并保存的一些shell命令
摘要: 在学习过程中,不免会遇到有些命令,那种需要的,但是你没有掌握的命令.为了节省时间,担心忘记这些,特开辟这个随笔,随时记录用到的一些命令.那么常用的不提了,自己去收集吧~ 1.文件按日期排序 应 ...
- hadoop学习(七)----mapReduce原理以及操作过程
前面我们使用HDFS进行了相关的操作,也了解了HDFS的原理和机制,有了分布式文件系统我们如何去处理文件呢,这就的提到hadoop的第二个组成部分-MapReduce. MapReduce充分借鉴了分 ...
- C语言tips_1 关于&& || ! 的优先级
关于&& || ! 三种操作的优先级 测试如下 简要分析 假设&&>|| 则结果为1 假设||>&& 则结果为0 结果为1 得证 & ...
- ASP.NET Core on K8S深入学习(3-2)DaemonSet与Job
本篇已加入<.NET Core on K8S学习实践系列文章索引>,可以点击查看更多容器化技术相关系列文章. 上一篇<3-1 Deployment>中介绍了Deployment ...
- 解决微信二次分享失败--后面被加上from=singlemessage&isappinstalled=0的解决方案
首次分享成功,点开后再次分享或第三次分享就失败了 1.检查你分享的链接,看是否多了两个参数,微信分享会根据分享的不同,为原始链接拼接: 朋友圈 from=timeline&isappins ...
- Spark 系列(十五)—— Spark Streaming 整合 Flume
一.简介 Apache Flume 是一个分布式,高可用的数据收集系统,可以从不同的数据源收集数据,经过聚合后发送到分布式计算框架或者存储系统中.Spark Straming 提供了以下两种方式用于 ...
- 聊一聊 SpringBoot 自动配置的原理
解析思路 我们建立好一个SpringBoot的工程后,我们将从启动类,SpringBootApplication开始进行探究. 开始解析 首先我们建立一个 Springboot的工程.找到启动类,我们 ...