webpack与babel的深奥,渣渣的我只能做个小笔记(持续更新)
最近公司封装的构建库用多了,感觉自己正在一步一步的变傻,所以趁还没下雪,手脚还没长冻疮,没事还是自己折腾一下吧。
本想记笔记,但没想到记笔记没法传图片。所以如果你看到了,就忽略了吧。o(╥﹏╥)o o(╥﹏╥)o o(╥﹏╥)o
思来想去,我入门webpack已经好多年了,以前写到过一篇:webpack再入门,说一下那些不入流的知识点,但从没深入过,希望这次能坚持下去,将webpack与babel好好深入一番。
webpack4官网:地址
babel官网: 地址
webpack相关
- 1.
在项目中,尝试着用antd的组件,然后引入了antd的css样式,然后报了个如下的错,这种错误抛出来,简直让你怀疑人生,因为你就在js中写了一句 import 'antd/dist/antd.css'。天天都在用的模式,怎么,怎么就报错了呢?
原因:自己在loader里配上了各种高大上的loader,什么sass,less,file,但是就是没有配css(哭晕在厕所)
解决办法:加上呗。
敲黑板: loader顺序与解析值得关注,loader的编译顺序是从右往左依次执行,以less类型为例,当编译器遇到a.less时,先通过less-loader将a.less编译为一个一个的css模块,然后再通过css-loader将其整合为一个css模块(怀疑中,还需要探索)。但是还需要一个地方去引入这个css,一般前面紧跟style-loader,但这个loader会把整个css通过style标签注入到HTML中,和这个时代主流有点不符合。所以这里我用了MiniCssExtractPlugin这个插件,它的作用是将css作为一个文件通过link标签引入。
- 2.
webpack4.27.1的文档中提到了公共代码分离提到了webpack.optimize.CommonsChunkPlugin,但是添加了运行后报错:
webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead
原因: 官方文档有一点滞后,需要修正吧,索性官方还是提供了splitChunks的使用说明,
解决办法:照着文档慢慢整吧。不过我发现里面的知识点还是挺多的,什么aysnc,initial,all这几个的区别。
Babel篇
- 1.
同一台电脑,webpack-dev-server在同一个端口启动第二个服务,会报:Error: listen EADDRINUSE xxxx端口错误
解决办法:可以在启动服务器,使用net库检测该端口是否已经被占用。
- 2.
使用了对象展开运算符,Babel编译报Unexpected token,如图:
原因:babel只配置了env,ES6中提出了展开运算符,但这个展开仅仅对数组展开(es2015-spread),而对象展开(object-rest-spread)现在还只是一个提案。
解决办法: 安装(babel-plugin-transform-object-rest-spread)并在babelrc添加"plugins": [ "transform-object-rest-spread" ]
- 3.
babel加了个支持async await的插件后报错TypeError: Falsy value found in plugins。baben 配置如下:
原因: .babelrc中plugins中的空字符串去掉(让人哭笑不得o(╥﹏╥)o的错误)
解决办法:去掉空字符串
-4.
想用一些超级语法,那就是必然会付出代价。接着上面async await讲,虽然加了插件编译成功,但在运行时,会报: ReferenceError: regeneratorRuntime is not defined。具体试验代码如下所示:
async function async1() {console.log('async1 start');await async2();console.log('async1 end');}async function async2() {console.log('async2');}async1();
原因:虽然chrome是支持es6语法的,但babel-preset-env并不是支持所有es6语法的编译。也就是说问题并不是出在async await语法的编译上(transform-async-to-generator),而是错在env没有对生成器语法的支持。如果有疑问,可以直接拷贝下列代码到浏览器中运行:
function* create() {let fir = yield 1;let sec = yield fir + 2;yield sec;}const iter = create();console.log(iter.next());
所以我们还需要增加babel对生成器语法的支持,就是加上babel-plugin-transform-runtime这个插件就ok了。
解决方法:安装babel-plugin-transform-runtime插件,并在.babelrc中plugins中的transform-async-to-generator之后加上transform-runtime支持。
敲黑板: .babelrc配置中的Plugin/Preset排序,官方说的很清楚了,我觉得我没有必要再扯犊子了,看图:
后面再加一句:我在babel上对这个排序还有点疑惑,因为我调整了顺序,并没有什么影响。o(╥﹏╥)o
-5.
‘The decorators plugin requires a decoratorsBeforeExport option’,装了个babel7,然后用箭头函数在react中声明了一个静态方法,然后曝出了上面所示的错误,这确实是专属于babel 7的,
解决方法:如上图所示,加配置legacy: true
webpack与babel的深奥,渣渣的我只能做个小笔记(持续更新)相关推荐
- (十)webpack 和 babel
webpack 和 babel webpack 面试题 基本配置 拆分配置和merge 启动本地服务 处理ES6 处理样式 处理图片 模块化 总结 高级配置 多入口 抽离css文件 抽离公共代码 懒加 ...
- 使用webpack、babel、react、antdesign配置单页面应用开发环境
这是Webpack+React系列配置过程记录的第一篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
- React+Webpack+Eslint+Babel构建React脚手架
React+webpack+Eslint+Babel构建React脚手架 参考网上文章,说的不是很全,想自己写一篇来巩固知识点,脚手架源码参考阮一峰老师的Github 所用技术栈 React Babe ...
- 前端工资涨不上去?可能是你没掌握构建工具:关于 Webpack、Babel、esbuild、Vite、Rollup、Parcel、SWC......的那些事
每个前端都应该掌握构建工具 大概从 2019 年到现在的这三年多的时间里,构建工具几乎已经成为前端发展最快的一个部分. 构建工具,属于前端工程化领域.而前端工程化,是每一个高级前端开发人员都必须要去深 ...
- webpack:js、css、es6装载与压缩配置-学习笔记
文章目录 webpack:js.css.es6装载与压缩配置-学习笔记 css文件打包 loader执行顺序 loader与plugin区别 less css抽取 js,css压缩处理 依赖包降级处理 ...
- webpack 配置 babel
文章目录 根据 webpack 版本的不同,安装的 babel 依赖有些区别,下面的是 webpakc 4.2 及以上版本安装的依赖. 4.2 之前的是:babel-core.babel-pres ...
- Vue之webpack之Babel
现在想把es6的代码,转成es5的代码. 记录一下方法: 首先新建一个webpack_babel 然后执行 npm init -y 会自动生成一个package.json的文件 安装babel插件: ...
- webpack和babel的区别
webpack webpack是一个打包工具,打包js.css.图片.html等,它可以分析整个项目的文件结构,确认文件之间的依赖,将文件合成.压缩.加入hash等,生成最终项目文件. babel b ...
- webpack及babel配置
请先确认自己的电脑已经安装了 node 和 npm,没有安装的请先安装,以下操作需在安装了这两个的基础上操作 webpack配置 1. 创建一个空文件夹 2. 创建 package.json 文件- ...
最新文章
- MPB:林科院袁志林组-利用acdSf3/acdSr4引物快速鉴定产ACC脱氨酶细菌
- 输出超限怎么解决 oj_三菱PLC输出指示灯输出模块不亮怎么解决
- BZOJ4668: 冷战 [并查集 按秩合并]
- python大神-Python 大神 kennethreitz 又搞事了
- ES6基础3(扩展)-学习笔记
- python怎么设置画布颜色_如何在kivy python中动态更改画布颜色?
- 设计模式之三:装饰者模式(简单实现(星巴兹咖啡))
- 区块链 常用词汇定义
- 学习《自己动手写网络爬虫》之记录1
- 科大讯飞和neospeech tts哪个更好
- 广州IT销售菜鸟总结精华
- 云计算的工作原理是什么?
- typedef struct LNode *p和typedef struct LNode笔记
- 简单的定时任务(项目发布时启动,停止时任务结束)
- java 证书错误_java – SSL证书错误:certificate_unknown
- Unity限制InputField输入数字
- P1017 进制转换 (洛谷)
- micropython教程下载_python教程之让micro:bit讲话
- react native 实战系列教程之热更新原理分析与实现
- 谷粒学院-云存储微服务环境搭建、上传讲师图像后端接口的实现