一个 xxx is not defined 引发的爬坑之路
出处 https://www.cnblogs.com/daysme/
- 2018-01-06
昨晚找了一个代码解决了我对配置的需求。
高兴的拿到手机上测试却发现点击没有效果,电脑上是可以的呀,电脑上的手机模式是可以的呀。
难道是这代码不兼容手机?可能吧,再找找其他代码,把关键词下的都看完了,没有其他可用的。
在手机上搞个 console ,看到是由于手机上显示 tool is not defined
, tool
是这个工具的构造函数。难道是转换后的 js 手机版浏览器不支持?可能吧。那么到底是什么代码不支持呢?
看了生成后的文件,应该是最后一步 tool 没有被导出。
入口文件源码是这样的:
import tool from './tool';
module.exports = tool;
下面的文章,都是自己编译、修改源码导致的报销,在浏览器上也不能运行,先是 tool is not defined
, 后是 exports is not defined
。
应该是手机不支持转换后的模块加载方式。然后我打算把他的代码放到我之前的项目里去转换。你问我为什么不使用他自己的项目转码?我也想,因为他项目好像不是在 windows 开发的,并且使用了一些非 windows 平台的命令,如 rm 、 mkdir ,我换成 windows 上的 rd 和 md 及对应的语法格式,或删除这些不支持的命令去手动操作,都没有用,而且他的项目里几乎都是使用全局安装的工具转换, node-sass 、 babel … 。他执行命令时是通过一条命令把这些命令串连起来的,有些工具全局安装后不知道如何使用,最后就抛弃了这种方式。
当然,我使用自己的项目去转换他的代码,也并没有成功,报错还是相同的。
尝试把他的代码合并在一起以去除模块依赖,然后代码并不能运行。我想如果我对es6了解再熟悉一点的话之条路应该可能走通。但我知道这是一条不归之路,可不能为了运行代码,把前沿的东西都给改落后了,对不起作者,自己也没面子。
尝试使用在线的 babel 和 require.js 来直接加载未来编译过的 js ,不知道是不是自己的使用方式不对,报错还是一样。
还是继续看源码,再百度,发现好像作者使用的是 module.exports
,网上说这是 CommonJS 规范(四个关键字, module, exports, require, global),一般用在 node 里比较多, 浏览器是不能运行的。 AMD 规范使用的是 require([module], callback);
形式。 require.js 使用的是 AMD 规范,他能在浏览器里运行。那么难道是因为作者写的是 CommonJS ,我却用 require.js 去加载,才导致的报错?然后就开始搜索解决 CommonJS 和 AMD 规范之前问题的方法,结果没有成功,不知道如何使用。
后来想不到其他办法了,决定沉下心来,看看能不能改写作者的源码。我想的只是反正都是规范搞的鬼,那模块化规范也就那几句,也一共才导入三四个文件,应该能手动改成之前项目里自己写过的那种可以编译在浏览器里运行的模块化方式。随便看了一下 package.json
,发现好像别一个名字有点可疑 babel-preset-env
,自己以前的项目里没有遇到过,看起来像是某种转换方式。百度了一下,发现是用来转换不同环境的代码的,比如仅在 node ,仅在 chrome ,而不是把所有代码通通转为 es5 ,因为现在大部分浏览器都支持很多 es6 语法了,没必要全部转换,也的确作者的 package.json 里并没有 babel-preset-es2015
。 想着为什么作者的示例不能在手机上运行,或许就是故意使用了特定的转换方式,可是手机浏览器不如电脑更新快,支持度不高导致报错。
遂赶快安装了 babel-preset-es2015
, 运行 browserify -s tool -e ./src/index.js -o ./dist/tool.js -t [ babelify --presets [env] ]
试试。行一下,官网上的例子 不是 browserify a.js -o b.js
吗这里多了个 -s 是什么鬼?去官网看了下大概是什么 UMD 规范,之前的搜索 CommonJS 和 AMD 时有记得 UMD 是为了兼容这两个的规范的。把 -s 去掉 browserify ./src/index.js -o ./dist/configui.js -t [ babelify --presets [env] ]
, 果然作者的代码编译出来也不能在电脑上用了,还是报了 tool is not defined
这个错,加上 -s 就好了, 使用 [es2015]
手机能运行了。
原来, 作者本就使用了兼容 CommonJS 和 AMD 的兼容规范 UMD, exports is not defined
这个坑是我自己挖出来的。走了这么多弯路, get 到 browserify 有个 -s
参数可以用来做模块化兼容,有个 babel 插件 babel-preset-env
可以用来转换为指定环境代码。
一个 xxx is not defined 引发的爬坑之路的更多相关文章
- 多线程爬坑之路-Thread和Runable源码解析之基本方法的运用实例
前面的文章:多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁,Atomic原子类) 多线程爬坑之路-Thread和Runable源码解析 前面 ...
- Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...
- Vue 爬坑之路(九)—— 用正确的姿势封装组件
迄今为止做的最大的 Vue 项目终于提交测试,天天加班的日子终于告一段落... 在开发过程中,结合 Vue 组件化的特性,开发通用组件是很基础且重要的工作 通用组件必须具备高性能.低耦合的特性 为了满 ...
- Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli vue ...
- Vue 爬坑之路(十二)—— vue-cli 3.x 搭建项目
Vue Cli 3 官方文档:https://cli.vuejs.org/zh/guide/ 一.安装 @vue/cli 更新到 3.x 之后,vue-cli 的包名从 vue-cli 改成了 @vu ...
- Tinker爬坑之路
目的 热修复去年年底出的时候,变成了今年最火的技术之一.依旧记得去年面试的时候统一的MVP,然而今年却变成了RN,热修复.这不得不导致我们需要随时掌握最新的技术.不然可能随时会被淘汰.记得刚进公司,技 ...
- 安卓易学,爬坑不易——腾讯老司机的RecyclerView局部刷新爬坑之路
针对手游的性能优化,腾讯WeTest平台的Cube工具提供了基本所有相关指标的检测,为手游进行最高效和准确的测试服务,不断改善玩家的体验.目前功能还在免费开放中. 点击地址:http://wetest ...
- Android爬坑之路
做了那么久前端,现在终于可以回到我的老本行, 今天我用了一天的时间配置里Android开发环境,mac和windows双平台,eclipse和IDEA双平台,别问为什么,我就喜欢,中间大坑不断,再加上 ...
- 安卓易学,爬坑不易—腾讯老司机的RecyclerView局部刷新爬坑之路
前言 安卓开发者都知道,RecyclerView比ListView要灵活的多,但不可否认的里面的坑也同样埋了不少人.下面让我们看看腾讯开发工程师用实例讲解自己踩坑时的解决方案和心路历程. 话说有图有真 ...
随机推荐
- Redis的key和value大小限制
Redis的key和value大小限制 今天研究了下将java bean序列化到redis中存储起来,突然脑袋灵光一闪,对象大小会不会超过redis限制?不管怎么着,还是搞清楚一下比较好 ...
- ajax评论
评论有好几种格式:有评论树.评论楼等的格式 发表评论注意事项: 1. 展示评论 1. 评论楼(Django模板语言渲染) 1. 从后端查询出所有的评论 2. 如果有父评论就展示父评论 2. 评论树 通 ...
- 1069: 统计字符gets函数
题目描述 编制程序,统计文本stdin中字符$出现的次数,并将结果写入文件stdout 输入 字符文本 输出 $次数 样例输入 as$dfkjhkjkjdhf asdfkj$lskdfj werijw ...
- 【附】Python安装
Python是跨平台的,它可以运行在Windows.Mac和各种Linux/Unix系统上. 首先要实现Python安装及环境变量配置,然后会得到Python解释器(就是负责运行Python程序的), ...
- GitHub使用笔记2:github常用操作
1: 绑定ssh keys 2:github新建仓库 echo "# SpringStack" >> README.md git init git add README ...
- gnats配置文件
尽管NATS可以无配置的运行,但也可以使用配置文件配置NATS服务器 1. 配置项包括 客户端监听器端口 Client listening port HTTP监听器端口 HTTP monitoring ...
- 第一章-硬件组成及linux发展历史(1)
一.服务器与计算机的组成? 计算机组成主要有:CPU.硬盘.内存.电源.显示器.鼠标.键盘 服务器组成主要有:CPU.硬盘.内存.电源.RAID卡.远程控制卡 CPU: 即:中央处理器,是一块超大规模 ...
- 【题解】Luogu P3871 [TJOI2010]中位数
平衡树板题 原题传送门 这道题要用Splay,我博客里有对Splay的详细介绍 每次加入一个数,把数插入平衡树中 并且要记录一共有多少个数 每次查询就查询平衡树中第(总数-1)/2+1个数 十分暴力 ...
- 判断一个点是否在RotatedRect中
openCV函数pointPolygonTest(): C++: double pointPolygonTest(InputArray contour, Point2f pt, bool measur ...
- kali linux web程序集简述
Burp Suite Burp Suite是一个用于执行Web应用程序安全性测试的集成平台. 它的各种工具可以无缝地协同工作,支持整个测试过程,从应用程序攻击面的初始映射和分析,到查找和利用安全漏洞. ...