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

模块化与包管理工具

作者: 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

相关文章

  • Node.js模块化学习

    模块化的基本概念Node.js 中模块化npm与包模块的加载机制 模块化的基本概念 什么是模块化 模块化是指解决一...

  • Go 学习笔记(一) : 3种方式得变量 / 常量与iota /

    为了基础的基础 package , import 包 , 与python类似, 与java不同. 用于模块化. 通...

  • github iOS热门仓库整理

    工具类:模块化管理工具 bigkeeperhttps://github.com/eleme/bigkeeper F...

  • 前端专业技能储备

    JavaScript相关 原型链与作用域 闭包 模块化(amd/cmd/umd/es6 module) 跨域多...

  • 模块化与包管理工具

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

  • gentoo包管理工具

    包管理工具 包的命名 gentoo中每个包名包含两部分,组名与包名,如:dev-db/redis,dev-db是组...

  • 十二、模块化

    1、es6 2、闭包模块化

  • 项目管理工具Maven

    项目管理工具Maven-点击观看 一、为什么学Maven 在开发中经常需要依赖第三方的包,包与包之间存在依赖关系,...

  • webpack 入门

    webpack 是什么? webpack是模块化管理工具,使用webpack可以对模块进行压缩、预处理、按需打包、...

  • webpack 入门

    webpack 是什么? webpack是模块化管理工具,使用webpack可以对模块进行压缩、预处理、按需打包、...

网友评论

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

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