webpack打包踩坑之TypeError: Cannot read property 'bindings' of null

2024-05-09 11:32

本文主要是介绍webpack打包踩坑之TypeError: Cannot read property 'bindings' of null,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

file loader介绍:https://www.webpackjs.com/loaders/file-loader/

babel loader介绍:https://webpack.js.org/loaders/babel-loader/

 webpack-dev-server介绍:https://www.webpackjs.com/configuration/dev-server/  ,https://www.jianshu.com/p/73d74445e5c5

今日在学习百度前端学院的一个小餐厅demo,学习用webpack打包遇到了一些问题

首先是根据这篇入门教学文章一步一步安装https://segmentfault.com/a/1190000006178770#articleHeader6

 

1、报错:TypeError: Cannot read property 'bindings' of null

原因:可能没装babel cli,看了网友写的才发现,加上之后就好了

第二个是babel版本问题

教学文章有点旧,是这样安装的

而官方的说明是

在webpack 4.2以上使用

npm install -D babel-loader @babel/core @babel/preset-env

重新安装后,再更改老的配置

原来是“env”而已,由网友提供的答案顺利解决了问题。

 

 

 

webpack - babel配置

babel是一个javascript编译器,是前端开发中的一个利器。它突破了浏览器实现es标准的限制,使我们在开发中可以使用最新的javascript语法。

通过构建和babel,可以使用最新js语法进行开发,最后自动编译成用于浏览器或node环境的代码。

webpack中使用babel

配合webpack使用babel前,需要首先使用npm init初始化一个项目,npm install -g webpack安装webpack(全局安装是为了在命令行使用webpack命令)。

  • 安装babel-loader, babel-core, babel-preset-env。

npm install --save-dev babel-loader babel-core babel-preset-env
其中,babel-preset-env插件是为了告诉babel只编译批准的内容,相当于babel-preset-es2015, es2016, es2017及最新版本。通过它可以使用最新的js语法。

  • 配置webpack.config.js

在webpack配置文件中配置bable-loader

复制代码

module: module: {{     rules: rules: [[         {{             test: test: /\.js$/,/\.js$/,             use: use: {{                 loader: loader: 'babel-loader','babel-loader',             options: {presets: [['env',{targets: {browsers: ['> 1%', 'last 2 versions']}}]]}},exclude: '/node_modules/'}]
}

复制代码

 

其中,exclude是定义不希望babel处理的文件。targets是presets的一些预设选项,这里表示将js用于浏览器,只确保占比大于1%的浏览器的特性,主流浏览器的最新两个主版本。
更多与配置有关的信息,可以参考:
babel env preset设置,
browserlist预设置.

  • 在命令行中运行相应webpack命令即可。
  • 由于babel-preset配置选项较多,我们一般可以在根目录下建立.babelrc文件,专门用来放置babel preset配置,这是一个json文件。可以将上述配置修改如下:

复制代码

//.bablerc文件
{"presets": [['env',{"targets": {"browsers": ['> 1%', 'last 2 versions']}}]]
}

复制代码

 

复制代码

//原webpack.config.js文件
module: {rules: [{test: /\.js$/,use: {loader: 'babel-loader'},exclude: '/node_modules/'}]
}

复制代码

 

 

babel-polifill插件

在上面的babel配置中,babel只是将一些es6,es7-8的语法转换成符合目标的js代码,但是如果我们使用一些特性或方法,比如Generator, Set, 或者一些方法。babel并不能转换为低版本浏览器识别的代码。这时就需要babel-polifill。

简单的说,polifill就是一个垫片,提供了一些低版本es标准对高级特性的实现。使用polifill的方法如下:

npm install --save babel-polifill

然后在应用入口引入polifill,要确保它在任何其他代码/依赖声明前被调用。

//CommonJS module
require('babel-polyfill');//es module
import 'babel-polifill';

 

在webpack.config.js中,将babel-polifill加入entry数组中:

entry: ["babel-polifill", "./app.js"]

 

相比于runtime-transform,polifill用于应用开发中。会添加相应变量到全局,所以会污染全局变量。

更多细节参考babel-polifill。

runtime-transform插件

runtime transform也是一个插件,它与polifill有些类似,但它不污染全局变量,所以经常用于框架开发。

安装:

npm install --save-dev babel-plugin-transform-runtimenpm install --save babel-runtime

 

用法:
将下面内容添加到.bablerc文件中

{"plugins": ["transform-runtime"]
}

 

更多细节参考bable-runtime-transform插件。

这篇关于webpack打包踩坑之TypeError: Cannot read property 'bindings' of null的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/973291

相关文章

如何解决Druid线程池Cause:java.sql.SQLRecoverableException:IO错误:Socket read timed out的问题

《如何解决Druid线程池Cause:java.sql.SQLRecoverableException:IO错误:Socketreadtimedout的问题》:本文主要介绍解决Druid线程... 目录异常信息触发场景找到版本发布更新的说明从版本更新信息可以看到该默认逻辑已经去除总结异常信息触发场景复

Python程序打包exe,单文件和多文件方式

《Python程序打包exe,单文件和多文件方式》:本文主要介绍Python程序打包exe,单文件和多文件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录python 脚本打成exe文件安装Pyinstaller准备一个ico图标打包方式一(适用于文件较少的程

Maven项目打包时添加本地Jar包的操作步骤

《Maven项目打包时添加本地Jar包的操作步骤》在Maven项目开发中,我们经常会遇到需要引入本地Jar包的场景,比如使用未发布到中央仓库的第三方库或者处理版本冲突的依赖项,本文将详细介绍如何通过M... 目录一、适用场景说明​二、核心操作命令​1. 命令格式解析​2. 实战案例演示​三、项目配置步骤​1

IDEA下"File is read-only"可能原因分析及"找不到或无法加载主类"的问题

《IDEA下Fileisread-only可能原因分析及找不到或无法加载主类的问题》:本文主要介绍IDEA下Fileisread-only可能原因分析及找不到或无法加载主类的问题,具有很好的参... 目录1.File is read-only”可能原因2.“找不到或无法加载主类”问题的解决总结1.File

Spring Boot项目打包和运行的操作方法

《SpringBoot项目打包和运行的操作方法》SpringBoot应用内嵌了Web服务器,所以基于SpringBoot开发的web应用也可以独立运行,无须部署到其他Web服务器中,下面以打包dem... 目录一、打包为JAR包并运行1.打包为可执行的 JAR 包2.运行 JAR 包二、打包为WAR包并运行

Python将字库文件打包成可执行文件的常见方法

《Python将字库文件打包成可执行文件的常见方法》在Python打包时,如果你想将字库文件一起打包成一个可执行文件,有几种常见的方法,具体取决于你使用的打包工具,下面就跟随小编一起了解下具体的实现方... 目录使用 PyInstaller基本方法 - 使用 --add-data 参数使用 spec 文件(

将Java程序打包成EXE文件的实现方式

《将Java程序打包成EXE文件的实现方式》:本文主要介绍将Java程序打包成EXE文件的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录如何将Java程序编程打包成EXE文件1.准备Java程序2.生成JAR包3.选择并安装打包工具4.配置Launch4

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

浅析Java中如何优雅地处理null值

《浅析Java中如何优雅地处理null值》这篇文章主要为大家详细介绍了如何结合Lambda表达式和Optional,让Java更优雅地处理null值,感兴趣的小伙伴可以跟随小编一起学习一下... 目录场景 1:不为 null 则执行场景 2:不为 null 则返回,为 null 则返回特定值或抛出异常场景

关于pandas的read_csv方法使用解读

《关于pandas的read_csv方法使用解读》:本文主要介绍关于pandas的read_csv方法使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录pandas的read_csv方法解读read_csv中的参数基本参数通用解析参数空值处理相关参数时间处理相关