使用node进行简单模块化demo测试

来源:互联网 发布:禁止别人安装软件 编辑:程序博客网 时间:2024/06/04 18:07

首先前不久用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 规范,这就需要我们额外使用模块打包工具,为我们的代码做一些包裹,让它能在浏览器端使用。 比如 BrowserifyWebpack

通过说明一我想到,虽然我现在还没有看webpack,但是可以用node环境进行一些简单的输出来写一些ES6的东西。因此gulp+babel转译成ES5,然后cd 到dist文件夹,执行 node 文件名.js 输出了我想要的结果,证明了node是实现了commonJS规范的环境!

问题:require()的时候,需要require("./lib.js");不能缺少./,否则报错。

原因分析:还是语法掌握的不牢固


0 0
原创粉丝点击