Nodejs中前端模块化是怎么一回事?以及如何使用

百度已收录   阅读次数: 65
2021-10-3011:24:17 发表评论
摘要

在学习Vuejs的过程中,时常会看到import,引入一些模块,这种类似案例就是所谓的前端模块化,至于为什么会出现这样的情况,其实是由于开发过程中解决实际的需要,规范控制JS文件,本篇文章就用一篇文章为你搞明白为何这样做,以及如何使用……

Nodejs中前端模块化是怎么一回事?以及如何使用

开篇寄语

在学习Vuejs的过程中,时常会看到import,引入一些模块,这种类似案例就是所谓的前端模块化,至于为什么会出现这样的情况,其实是由于开发过程中解决实际的需要,规范控制JS文件,本篇文章就用一篇文章为你搞明白为何这样做,以及如何使用。

内容详情

先设想这样一个场景,程序员A和程序员B共同开发一个项目,程序员A创建了一个名为a.js的文件,代码如下:

var car = 'Tesla'
var num = 22

function total(price, num) {
  return price * num
}

var check = true

if (check) {
  console.log(total(10, 20));
}

然后程序员B创建了名为b.js的文件,代码如下:

var car = 'BMW'
var check = false

之后,在html文件中,都进行了引用:

  <script src="a.js" ></script>
  <script src="b.js" ></script>

那么问题就来了,本来想打印的内容却没有出现,即total()函数没有运行,这到底是为什么呢?其实是因为引入a.js和b.js后,里面的check又a.js的true变成了b.js的false,自然是无法输出了。

所以,为了解决这种问题,前端模块化的需求就应运而生了。

CommonJS需要nodeJS的依支持,这也就是前端模块化。

那么上面的例子如何修改呢?先来看a.js的修改:

var car = 'Tesla'
var num = 22

function total(price, num) {
  return price * num
}

var check = true

if (check) {
  console.log(total(10, 20));
}

module.exports = {
  check,
  total
}

之后新建一个c.js,来引入使用a.js中的内容,代码如下:

var {check, total} = require("./a")

console.log(total(10,20));

if(check){
  console.log("flag is true");
}

在调试窗口运行后,生成效果如下:

Nodejs中前端模块化是怎么一回事?以及如何使用

那么如何在html该如何引入呢?可以这样修改:

  <script src="a.js" type="module"></script>
  <script src="copilot.js" type="module"></script>

可以看到是在<script>标签中写成type='module'。

温馨提示

掌握了前端模块化后,对于学好Vue.js是打下了坚实基础哦。

分享至:
  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: