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

摘要

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

开篇寄语

在学习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");
}

在调试窗口运行后，生成效果如下：

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

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

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

温馨提示

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