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-runtime npm install --save babel-runtime
用法:
将下面内容添加到.bablerc文件中
{
"plugins": ["transform-runtime"]
}
更多细节参考bable-runtime-transform插件。
webpack打包踩坑之TypeError: Cannot read property 'bindings' of null的更多相关文章
- vue-cli +echarts-amap集成echarts和高德地图TypeError: Cannot read property 'dataToPoint' of null解决方案
由于项目的需求,需要做一种迁徙效果, 最后我们采用了组件化开发,可以说这个坑自己一个人踩,有点累,但也收获不少. vue-cli +echarts-amap集成echarts和高德地图,出现报错,错误 ...
- Egret(白鹭引擎)——“TypeError: Cannot read property 'asCom' of null”
前言 相信我,这个错误新手都不陌生:TypeError: Cannot read property 'asCom' of null 还有,一定要看我上一篇,哦不(人家应该是报了这个错,才找到看到这篇文 ...
- Uncaught TypeError: Cannot read property 'ownerDocument' of null
/********************************************************************* * Uncaught TypeError: Cannot ...
- Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null
在开发Ext 项目中如果遇到 Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null 这个错误,检查下renderT ...
- Uncaught TypeError: Cannot set property 'innerHTML' of null
学习Chrome插件时,要在弹出页面中显示当前时间,结果怎样也显示不出来 看了 http://www.cnblogs.com/mfryf/p/3701801.html 这篇文章后感悟颇深 通过调试发现 ...
- Three.js three.js Uncaught TypeError: Cannot read property 'getExtension' of null
在调试Three.js执行加载幕布的时候,突然爆出这个错误three.js Uncaught TypeError: Cannot read property 'getExtension' of nul ...
- JavaScript Uncaught TypeError: Cannot read property 'value' of null
用 JavaScript 操作 DOM 时出现如下错误: Uncaught TypeError: Cannot set property 'value' of null Uncaught TypeEr ...
- TypeError: Cannot read property 'length' of null
本文为博主原创,未经允许不得转载: 异常展示: [Vue warn]: Error in getter for watcher "filterAndSortData": " ...
- 前台报错:Uncaught TypeError: Cannot read property '0' of null
错误现象: var div1=mycss[0].style.backgroundColor; //这一行提示360和chrome提示:Uncaught TypeError: Cannot read ...
随机推荐
- PHP之旅 php数据类型
1.php中int型,表示八进制或十六进制或者十进制时的不同,八进制前面加0,十六进制前面加0x <?php $dec_int=99; $oct_int=066; $hex_int=0X1a; ...
- P2278 操作系统
P2278 操作系统 题目描述 写一个程序来模拟操作系统的进程调度.假设该系统只有一个CPU,每一个进程的到达时间,执行时间和运行优先级都是已知的.其中运行优先级用自然数表示,数字越大,则优先级越高. ...
- QuantLib 金融计算——随机过程之一般 Black Scholes 过程
目录 QuantLib 金融计算--随机过程之一般 Black Scholes 过程 一般 Black Scholes 过程 如果未做特别说明,文中的程序都是 Python3 代码. QuantLib ...
- Visual Studio Code 调试 PHP
Visual Studio Code 调试 PHP 2018/12/4 更新 Nginx + php-cgi.exe 下与 Visual Studio Code 配合调试 必需环境 Visual St ...
- 查看linux上面是否有安装redis
- (转)nginx+iis实现负载均衡
最近在研究分布式系统架构方面的知识,包括负载均衡,数据库读写分离,分布式缓存redis等.本篇先从负载均衡服务架构入手,关于负载均衡百度百科的定义如下:负载均衡,英文名称为Load Balance,其 ...
- 【Guava】Optional接口来避免空指针错误
null会带来很多问题,从开始有null开始有无数程序栽在null的手里,null的含义是不清晰的,检查null在大多数情况下是不得不做的,而我们又在很多时候忘记了对null做检查,在我们的产品真正投 ...
- hibernate树状映射
例如公司的组织机构:一个公司可以有多个子公司,一个子公司子有多个部门. 其实就是一张表, 例子程序: Organization类: package com.oracle.hibernate; impo ...
- 《LeetBook》leetcode题解(5):Longest Palindromic [M]——回文串判断
我现在在做一个叫<leetbook>的免费开源书项目,力求提供最易懂的中文思路,目前把解题思路都同步更新到gitbook上了,需要的同学可以去看看 书的地址:https://hk029.g ...
- mongodb-脏数据问题
采用多线程后, 发现最大的问题是redis和mongodb的脏数据问题 1, upsert 的脏数据问题 多线程对同一个collect进行upsert操作时, 会引发并发脏数据问题, 最开始的解决方案 ...