zoukankan      html  css  js  c++  java
  • nodejs 学习笔记(二)—— CommonJS规范&npm包管理工具

    CommonJS 简介

    commonjs规范是前端模块化的一种方法,它规定每个js文件都是一个模块,有自己独立的作用域和私有属性、方法,这些属性和方法对其他文件不可见,只能通过exports暴露出去,其他文件通过require引用后才能使用。
     
    练习
    创建urlWrapper.js文件
    function wrapUrl(url) {
        return 'http://127.0.0.1/' + url
    }
    
    module.exports = wrapUrl

    其中 module.exports 属性表示当前模块对外输出的接口,其他文件加载该模块,实际上就是读取module.exports变量。

    创建commonjs.js文件

    const wrap = require('./urlWrapper')
    
    let url = 'testUrl'
    
    console.log(wrap(url)) // http://127.0.0.1/testUrl

    通过require引入该方法,这里引入的方法名可以自定义,我这边定义了个 wrap 可以正确打印出结果。

    为了方便,Node为每个模块提供一个exports变量,指向module.exports。这等同在每个模块头部,有一行这样的命令:

    var exports = module.exports;

    这样我们可以直接在exports上添加方法和属性。

    改写上面的urlWrapper.js文件:

    function wrapUrl(url) {
        return 'http://127.0.0.1/' + url
    }
    
    exports.wrapUrl = wrapUrl

    common.js文件:

    const { wrapUrl } = require('./urlWrapper')
    
    let url = 'testUrl'
    
    console.log(wrapUrl(url)) // http://127.0.0.1/testUrl

    注意,这里引入的module.exports是一个对象,要通过对象解构拿到对应的方法,且方法名要和exports的方法名一致。

    npm包管理工具

    nodejs模块分为两种,核心模块和文件模块(自定义模块)。核心模块是nodejs自带的可以直接引入使用,自定义模块需要自己编写或者用别人的,而npm就是用来管理这些模块的工具。通过npm,我们可以很方便地实现包共享了。

    1. --save 和 --save-dev 的区别

    使用 --save 命令安装的包会被记录在 package.json 文件的 dependencies 里,是发布要依赖的包,如 jquery 包;使用 --save-dev 命令安装的包会被记录在 devDependencies里,是开发要依赖的包,比如 js的压缩包 gulp-uglify,发布项目并不依赖它。

    2. node_modules 文件夹

    新建node_modules文件夹,将上面的urlWrapper.js文件放在该文件夹下,引入时就可以不写路径直接写文件名

    const { wrapUrl } = require('urlWrapper.js')

    它会自动去node_modules文件夹下查找该文件。

    3. package.json

    在项目文件夹下运行 npm init --yes(跳过选择默认yes) 生成 package.json 文件,它描述了你的项目信息以及依赖哪些包。

    包的常用版本号解释:

    ^ 2.5.0 表示保留第一位2,安装2.x.x 最新版本

    ~2.5.0 表示保留前两位2.5,安装2.5.x 最新版本

    指定版本安装命令:npm install xxx@2.5.0

    参考:https://javascript.ruanyifeng.com/nodejs/module.html#toc2 (exports 和 module.exports 的区别)

  • 相关阅读:
    【转】【SEE】基于SSE指令集的程序设计简介
    【转】【Asp.Net】asp.net服务器控件创建
    ControlTemplate in WPF ——ScrollBar
    ControlTemplate in WPF —— Menu
    ControlTemplate in WPF —— Expander
    ControlTemplate in WPF —— TreeView
    ControlTemplate in WPF —— ListBox
    ControlTemplate in WPF —— ComboBox
    ControlTemplate in WPF —— TextBox
    ControlTemplate in WPF —— RadioButton
  • 原文地址:https://www.cnblogs.com/zdd2017/p/14611836.html
Copyright © 2011-2022 走看看