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

首先前不久用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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值