如何理解模块化和npm

前言

对于模块化和npm相信大家都不陌生,在以前,es5是不支持模块化的,只能通过第三方库去实现模块化,所以会给不少前端程序员造成困扰,到了先在,es6原生语法是完成支持模块化的,所以理解和使用模块化和npm对于我们来说是很有必要的。

一. 什么是模块化

一个js的文件里面可以引入另外的js文件,还是引入其中的数据,我们可以称之为模块化

二. 模块化的作用

模块化对于我们的开发是至关重要的,使用模块化开发可以很轻松地解决各种变量名、函数名的冲突问题,还能解决文件的依赖问题

三. 模块化规范

• CommonJS 规范(nodejs 默认支持的)
• ES6 模块化规范
• CMD 和 AMD 模块化规范（不再推荐使用

模块化代码演示

CommonJS规范

CommonJS规范中主要规定了以下三项内容：

1. 导入其它模块时，统一使用 require() 函数。

    //定义模块
    const name = '李华'

    function data() {
      console.log('你们好!')
    }

    //导出
    module.exports = {
      name,
      data
    }

2. 每个 .js 文件，都是一个独立的模块，模块内的成员都是私有的。

    //根据路径,引入自定义模块
    const res = require('./user.js')

    //打印结果
    console.log(res)

3. 可以使用 module.exports 向外共享成员。

四. 什么是npm和包

npm又称为node包管理器,有了npm,就能完美解决node里面第三方包共享的问题,在我们的工作中,有些功能代码是需要在其他的项目中重复使用的,这是我们可以选择把代码打包放在npm里,在需要的时候去下载即可

注意 : npm是不需要单独安装的,在安装node的时候也会附带安装npm

npm包的下载和使用和步骤

1. 在项目中初始化包管理配置文件 npm init -y
2. 运行npm下包的命令 npm install/i 包名
3. 在项目中导入和使用下载的第三方的包 使用require('包名')导入包