一个 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 可以用来转换为指定环境代码。

​