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

相关文章

springboot3打包成war包,用tomcat8启动

1、在pom中,将打包类型改为war <packaging>war</packaging> 2、pom中排除SpringBoot内置的Tomcat容器并添加Tomcat依赖,用于编译和测试,         *依赖时一定设置 scope 为 provided (相当于 tomcat 依赖只在本地运行和测试的时候有效,         打包的时候会排除这个依赖)<scope>provided

ImportError: cannot import name ‘print_log‘ from ‘logging‘

mmcv升级到2.+后删除了很多 解决 查FAQ文档,找到 添加到mmcv.utils下即可

vue 父组件调用子组件的方法报错,“TypeError: Cannot read property ‘subDialogRef‘ of undefined“

vue 父组件调用子组件的方法报错,“TypeError: Cannot read property ‘subDialogRef’ of undefined” 最近用vue做的一个界面,引入了一个子组件,在父组件中调用子组件的方法时,报错提示: [Vue warn]: Error in v-on handler: “TypeError: Cannot read property ‘methods

Unstructured cannot write mode RGBA as JPEG 错误解决

Unstructured cannot write mode RGBA as JPEG 错误解决 0. 错误详细1. 解决方法 0. 错误详细 Image Extraction Error: Skipping the failed imageTraceback (most recent call last):File "/root/miniconda3/envs/learn-y

[轻笔记] pip install : Read timed out. (closed)

添加超时参数(单位秒) pip --default-timeout=10000 install ${package_name}

Cannot read property ‘length‘ of null while opening vscode terminal

同一问题地址:Cannot read property ‘length’ of null while opening vscode terminal 问题描述 One day, 我在ubuntu 18.04下用vscode打开一个项目,并想和往常一样在vscode使用终端,发现报错Cannot read property 'length' of null。 解决 打开setting.jso

android6/7 system打包脚本

1.android5打包system就是网站上常见的制作ROM必备的解包打包system脚本 指令如下:mkuserimg.sh -s out/target/product/$TARGET_PRODUCT/system out/target/product/$TARGET_PRODUCT/obj/PACKAGING/systemimage_intermediates/system.img

android打包解包boot.img,system.img

原帖地址:http://www.52pojie.cn/thread-488025-1-1.html 转载Mark一下,日后研究 最近工作需要对boot.img,system.img进行破解。顺便将心得分享一下。 我的工作环境是在linux下的。所以工具都是针对linux的。 boot.img破解相关工具: 1、split_boot    perl脚本 2、boot_i

MTK Android P/Q system/vendor/super快速打包

一、Android 新版本默认开启了动态分区,把system vendor  product等分区打包成一个super分区。这对于我们使用替换分区的方法来排查问题不是很方便,直接替换一个super也不知道到底是哪个部分导致的。所以我们需要自己制作super.img来缩小范围。下面讲讲如何快速生成system、vendor、super,以及vbmeta(校验image,不匹配可能会导致不开机) 二

MTK AndroidP/Q快速打包ramdisk

一、Android P/Q ramdisk与老版本的差异 Android老版本的ramdisk是out下的root/ramdisk打包而来,里面包含了init  /sbin  init.rc   default.prop等文件。是一个完整的ramdisk Android新版本ramdisk分为了out 下的ramdisk目录和root目录,init ,init.rc等文件大部分都放到了syst