美文网首页
模块化与包管理工具

模块化与包管理工具

作者: beizi | 来源:发表于2021-03-26 03:27 被阅读0次

    模块化

    简单来说就是一个js文件可以引入另一个js文件的方法
    使用模块化开发可以很好的解决变量、函数名冲突问题,也能灵活的解决文件依赖问题。

    模块化的发展

    • 以前
      es5不支持模块化,让前端人员很为难。为了支持模块化,我们一般会借用第三方库来实现:

    • 现在

      • es6原生语法也支持模块化(并不表示浏览器也直接支持模块化 --- 需要单独设置一下)
      • Nodejs内部也支持模块化(与es6的模块化有些不同之处)

    自定义模块

    自定义模块就类似于自定义函数
    使用场景:

    • 代码需要在项目重用
    • 代码需要提供给他人使用
    • 有利于优化代码结构,方便后期维护与扩展
      有两个步骤:
      1.定义模块。就是创建一个js文件,有导出
      2.使用模块。在需要使用的地方去导入模块文件。

    定义模块

    所谓定义模块,就是新建一个js文件。文件取名时,要注意一下:

    • 不能与核心模块的名字相同
    • 要记得导出模块
    • 一般模块会与js文件同名
    // 一个模块就是一个.js文件
    // 我们会在这里定义功能,并导出
    function add(x, y) { 
      return x + y 
    }
    // 导出模块      module.exports = 要导出的内容(一般会是一个对象)
    module.exports = {
        add        //"add": add
    }
    

    使用模块

      // 导入    const 模块名 = require(相对路径)
    let myModule = require('./myModule-定义模块');  
    console.log(myModule);         //使用前要console.log一下,看一下内容
    console.log(myModule.add(1, 2));     
    

    导出模块有两种方式

    1. module.exports = 要导出的内容
    2. exports.xxx = xxxx
      exports.yyy = yyyy
      建议使用:module.exports

    npm基本介绍

    npm全称 Node Package Manager(node 包管理器),它的诞生是为了解决 Node 中第三方包共享的问题 
    `npm`不需要单独安装。在安装Node的时候,会连带一起安装`npm`
    `npm` -v检查安装的情况
    

    它指两个内容:

    • 命令行工具

          npm init --yes        //采用默认信息初始化
          npm init             //填入关于项目的信息 初始化项目
          npm install 包名    //安装第三方包      默认下载最新版
          npm install 包名@版本号    //安装指定版本的包
          npm install    //下载package.json中全部的包  因收到没有node_modules文件夹 则会按照依赖下载包
      
    • npm网站

          其中存放着第三方包(第三方模块,其它的程序员写的代码)
          所有的前端的库,框架.....都已经在npm这个网站有现在的,
       可以直接下载的,有最新版(还可以下载指定版本号),不要钱的.....
          所有要上传或者是下载的内容,都必须要以包的格式进行组织
      

    如何用npm去下载并使用包

    1.初始化项目

    • 创建空文件夹(不能使用中文名字)

    • 在文件根目录下启动小黑窗 输入

        npm init --yes
      

    生成package.json文件后
    2.下载包

            npm install 包名
    

    3.使用包

    //使用,在自己的代码中,const 包名 =  require('包名') 来使用
      const dayjs = require('dayjs')      // 以dayjs为例
    
    ps:我们如何知道自己需要下载哪个包?
    • 观察
    • 学习,积累

    node_modules文件夹

    1.有何作用?
    在使用npm install 命令时,保存从npm上下载的第三方包.
    2.此文件夹如何产生的?
    第一次去下载包的时,它会自动创建
    3.注意事项
    它的名字是固定
    随着你的项目中包用的越来越多,它会变的越来越大
    分享你的项目时,可不用分享这个文件夹,其他人可以通过npm install 自动下载依赖包

    全局安装和本地安装

    全局安装的格式
        npm install xxxx -g
        npm install -g xxxx
    本地安装
        不加-g
    

    全局安装nodemon&nrm

    nrm

    作用:更换下载包的地址(镜像)
    安装:

        npm install -g nrm
    

    使用:

        nrm ls      //罗列所有可以下载包的地址,当前的地址前面会有一个*号
        nrm use XXX     //更换下载包的地址
    
    nodemon

    作用:监听代码变化,并自动重新运行
    安装:

      npm install -g nodemon
    

    使用:

      nodemon xxxxx.js      //用nodemon代替前边使用的node

    相关文章

      网友评论

          本文标题:模块化与包管理工具

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