美文网首页
使用Browserify来实现CommonJS的浏览器加载

使用Browserify来实现CommonJS的浏览器加载

作者: 苦苦修行 | 来源:发表于2018-07-29 13:56 被阅读0次

默认情况下,node.js的模块写法在浏览器端是不能运行的,
那有无办法实现呢?有,这就需要Browserify登场了。(Browserify就是浏览器化的意思)

请看一个例子,b.js模块加载a.js模块

// a.js
var a = 100;
module.exports.a = a;

// b.js
var result = require('./a');
console.log(result.a);

index.html直接引用b.js会报错,提示require没有被定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script src="b.js"></script>    
</body>
</html>
740839-20170513234546269-163449323.png

这时,就要使用Browserify了
首先安装:npm install -g browserify
然后转换:browserify b.js > bb.js

index.html引用bb.js,控制台显示100

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script src="bb.js"></script>
</body>
</html>

参考文献:使用Browserify来实现CommonJS的浏览器加载

相关文章

  • 使用Browserify来实现CommonJS的浏览器加载

    默认情况下,node.js的模块写法在浏览器端是不能运行的,那有无办法实现呢?有,这就需要Browserify登场...

  • CommonJS

    commonJS 是 node端的引入模块方案 浏览器端实现commonJS步骤 开发环境使用commonjs编码...

  • 前端模块化类(1)

    前端模块化规范: (一) commonJs ①下载git和node ②下载使用browserify对主要文件(ap...

  • browserify

    Browserify本身不是模块管理器,只是让服务器端的CommonJS格式的模块可以运行在浏览器端。这意味着通过...

  • 模块化module/CommonJS/Browserify/AM

    模块化module/CommonJS/Browserify/AMD/RequireJS/CMD/SeaJS/ES6...

  • export,import

    ES6之前模块加载方案,CommonJS (用于服务器)和 AMD(浏览器)2.CommonJS 和 AMD模块只...

  • ES6 import

    本质是 结合 babel语法转化(转换完包含commonJS的语法 如require) 和 browserify(...

  • ES6学习(14)模块化

    ES6 之前的模块化规范有:CommonJS => NodeJS、Browserify;AMD => requir...

  • CommonJS、AMD、Browserify、SystemJS

    你是否是 JavaScript 新手?并且对模块,模块加载器和模块打包器感到困惑吗?或者你已经编写了一段时间的 J...

  • 22Module语法

    概述 CommonJS 是服务器模块加载规范,AMD 是浏览器模块加载规范 前者,nodejs中require和m...

网友评论

      本文标题:使用Browserify来实现CommonJS的浏览器加载

      本文链接:https://www.haomeiwen.com/subject/lybzmftx.html