首先前不久用gulp+babel搭建了将ES6转换成ES5的环境,以后可以开心的写ES6而且不怕浏览器不支持了。
但是今天看了深入浅出ES6的模块化,想要在浏览器中用一下模块化,现代浏览器都不支持,因此只能用我的小工具gulp+babel转换了。转换之后想要在浏览器效果,结果浏览器不支持,出现了Uncaught ReferenceError: require is not defined(…)错误,想想不明白,google一下之后发现才明白。
说明一:
Babel 所做的只是帮你把‘ES6 模块化语法’转化为‘CommonJS 模块化语法’,其中的require
exports
等是 CommonJS 在具体实现中所提供的变量。
任何实现 CommonJS 规范的环境(如 node 环境)可以直接运行这样的代码,而浏览器环境并没有实现对 CommonJS 规范的支持,所以我们需要使用打包工具(bundler)来进行打包,说的直观一点就是把所有的模块组装起来,形成一个常规的 js 文件。
常用的打包工具包括 browserify webpack rollup 等。
说明二:Babel
的作用是帮助我们转换 ES6 代码为 ES5, 但是它没有模块管理的功能,浏览器端默认也无法识别 CommonJs
规范,这就需要我们额外使用模块打包工具,为我们的代码做一些包裹,让它能在浏览器端使用。 比如 Browserify
, Webpack
。
通过说明一我想到,虽然我现在还没有看webpack,但是可以用node环境进行一些简单的输出来写一些ES6的东西。因此gulp+babel转译成ES5,然后cd 到dist文件夹,执行 node 文件名.js 输出了我想要的结果,证明了node是实现了commonJS规范的环境!
问题:require()的时候,需要require("./lib.js");不能缺少./,否则报错。
原因分析:还是语法掌握的不牢固