首页 > 其他分享 >手撸一个js 的npm 包

手撸一个js 的npm 包

时间:2023-07-15 16:33:16浏览次数:51  
标签:npm ... 浏览器 一个 代码 js 打包

手撸一个js 的npm 包

打包后的格式

commonjs vs esmodule vs AMD vs IIFE vs UMD

  • commonjs
    早期社区js模块化的一种方式,适用于nodejs端,为了能够在浏览器中运行,可以借助Browserify,将commonjs风格的js 代码转换成可以在浏览器中运行的代码.它的代码风格如下:
var some=require('module');

module.exports={
  xxx
}
  • AMD (Asychronous Module Definition)

早期浏览器中模块化的一种方式,全名是异步模块定义方式。借助requirejs可以直接在浏览器中运行amd 风格的模块化代码。它的代码风格如下:

define('moduleName',[...dependencies],function(...dependencies){
  xxxxx

  return modules; // all the export will be returned as an object
})
  • esmodule
    这个是es6模块化的一种方式,可以直接在代码中使用import/export,目前一些主流的浏览器的最新版都支持了,在nodejs 端可能还不支持。代码风格如下:
import 'xxxx'

export xxx;
  • IIFE(Immediately Invoked Function Expresstion)

立即执行的函数表达式,它的好处是不会污染全局上下文,代码风格如下:

(function(){
  xxx
})();
  • umd (Universal Module Definition)

它其实是一种写法,使得写出的代码同时支持amd,commonjs,以及浏览器中的运行它的写法如下:

(function(root,factory){
  // commonjs runtime
  if(typeof exports ==='object' && typeof module === 'object'){
    module.exports = factory(...require(depency));
  }
  // requirejs runtime
  else if(typeof define === 'function' && define.amd){
    define([...dependencies],factory);
  }
  // run in browser directly
  else{
    var a = typeof exports === 'object' ?
    factory(...require(depency)):
    factory(...root[depency]);
    for(let i in a){
      root[i]=a[i];
    }
  }
})(this,(...dependencies)=>{
// package Content
})

很显然,UMD是一种很吸引人的打包方式,同时支持CommonJs/AMD/浏览器的方式

打包工具使用与配置

我们可以使用多种工具来实现UMD的打包,

  • babel, 一种常用的js转码器,可以借助它的插件来实现UMD的打包。例如,file-saver中利用 @babel/plugin-transform-modules-umd 实现了UMD的打包。命令如下:
// dev
babel -o dist/FileSaver.js --plugins @babel/plugin-transform-modules-umd src/FileSaver.js

// prod
babel -o dist/FileSaver.min.js -s --plugins @babel/plugin-transform-modules-umd --presets minify src/FileSaver.js
  • webpack 强大的前端困扎器,功能强大的不要不要的,配置复杂的不要不要的。
module.exports={
  output:{
    library:{
      // 表明最终打包输出为UMD 格式
      type:'umd',
    }
  },
  // 指明哪些包是外部的包,打包时不要打包进去
  externals:{
    lodash:'lodash',
  },
  // 表示外部的包会以什么格式出现,本包中的对外部包的引用会以依据改配置来
  // 生产相应格式的代码
  externalTypes:'umd'
}

npm 发布

发布就相对简单多了,

  • 首先使用npm login, 登录远端的registry
  • npm run build 编译包,这个自己在package.json 中定义编译脚本
  • npm publish 就行了, 可以在package.json 的files 节点来定义哪些文件是需要发布的使用的是glob 语法 (**/*).每次发布的version 号要唯一,

标签:npm,...,浏览器,一个,代码,js,打包
From: https://www.cnblogs.com/kongshu-612/p/17556445.html

相关文章

  • 1-18 编写一个程序,删除每个输入行末尾的空格及制表符,并删除完全是空格的行
    ArchlinuxGCC13.1.1 202304292023-07-1516:24:47星期六 点击查看代码#include<stdio.h>#include<string.h>#defineMAX_LINE_LENGTH1000intgetline_n(charline[],intmaxline);voidremove_space(charline[]);intmain(){charline[MAX_LI......
  • 构建第一个idea工程
    1、构件工程 2、构建maven普通工程  2、第一次还是要去找我们的maven路径    ......
  • 初学C语言day01——第一个C语言程序
    第一个C语言程序#include<stdio.h>//包含头文件#预处理指令(在预处理阶段进行处理)//argc表示命令行参数的个数argv一个字符串数组命令行参数intmain(intargc,char*argv[]){printf("Helloworld!\n");//标准输出函数C语言程序本身是没有输入输出......
  • 大语言模型中一个调皮的EOS token
    背景最近需要做一个微调的培训,所以不可避免地需要上手一下相关的微调,而受限于机器资源,暂时没法做全参数微调,所以就尝试了目前比较火的两种高效微调方式,分别是PTuning和LoRA。模型选择得自然是现在中文做的比较好的ChatGLM2-6B。微调的代码分别用的是PTuningLoRA在分别尝试了......
  • python ValueError: No JSON object could be decoded
    解决“pythonValueError:NoJSONobjectcouldbedecoded”问题概述在Python开发中,我们经常会遇到处理JSON数据的情况。然而,在处理JSON数据时,有时会遇到ValueError:NoJSONobjectcouldbedecoded的错误。这个错误通常发生在尝试将字符串解析为JSON对象时,但字符串无效或无......
  • jsonp
    1、介绍jsonp是cors通信的一种解决方案。利用html元素跨域请求时,自动携带目标域cookie的特点进行。jsonp_百度百科(baidu.com)JSONP教程|菜鸟教程(runoob.com)2、三种使用2.1 script标签<scriptsrc="https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbac......
  • Node.js安装
    目录Node.js安装环境配置测试Node.js安装1.下载网址https://nodejs.org/zh-cn/download/下载完成后打开安装包,进入安装程序【next】【next】后选择安装路径,默认C盘即可不选中,直接下一步,安装安装完成点击finish,并测试是否成功【win+R】然后输入cmd,打开运行窗口,输入no......
  • Java导出格式化后的JSON文件
    Java导出格式化json文件直接上代码:privatevoiddownloadJsonFile(LifeDTOlifeDTO,HttpServletResponseresponse){Stringcontent=JSON.toJSONString(lifeDTO,SerializerFeature.PrettyFormat,SerializerFeature.WriteMapNullValue,SerializerFeature......
  • RxJs 里的 using operator 的使用场景介绍
    RxJS的using操作符是一种创建可观察对象的方法,它可以处理订阅开始时和结束时的资源分配。这使得using在处理需要清理的资源(如数据库连接、文件句柄或网络连接)时非常有用。using操作符创建一个可观察对象,该对象会在订阅开始时创建一个资源,并在订阅结束时释放该资源。这使得......
  • 什么是 Rxjs Observable subscribe 方法的副作用
    RxJSObservable是一个强大的用于处理异步或多值的工具。它可以被看作一个事件流,开发人员可以监听这个事件流,并在事件发生时执行一些操作。这就是为什么说Observable的subscribe方法有副作用(sideeffects):因为当开发人员订阅(subscribe)一个Observable时,开发人员实际上是在定......