建立一个前端的工具库---创建npm工程

最新推荐文章于 2024-08-10 11:57:40 发布
最新推荐文章于 2024-08-10 11:57:40 发布
阅读量3.9k 收藏 5
点赞数 1
分类专栏： javascript 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chaos_hf/article/details/78735335
版权
本文介绍了如何建立一个前端npm工具库，包括设置npm标准工程，采用模块化语法，尤其是对按需引入的讨论。通过合理分类工具函数，支持按需加载，提高代码维护性和效率。同时，提醒开发者慎用ES6语法，以避免在不支持该语法的环境中造成问题。
摘要由CSDN通过智能技术生成

要建一个工程，首先得明白这个工程的作用。因为现在公司还有部分工程是老工程，所以，这次规划除了针对新工程，还需要能够将js打包成压缩文件提供给老工程使用标签引入。打包工具选择webpack，单元测试集成了karma+jasmine。好了，现在就开始搭建吧！

npm标准工程

因为是npm工程，所以本地首先要有node环境，并且装上npm。如果没有配置的请自行到官网下载安装。

当环境都配置好了之后我们就可以使用命令npm init，然后依次填入信息，就可以生成一个package.json文件了。

这里写图片描述

生成的package.json文件如下：

{
  "name": "js-
最低0.47元/天 解锁文章
chaos_hf
关注
专栏目录
建立一个前端的工具库---搭建篇
chaos_hf的博客
11-29 5268
一、需求 工具公司需要，决定搭建一个组件库。为了实用，这个组件库主要需要满足以下几点需求。能够使用npm安装，支持amd规范； 现代的前端早已经脱离了刀耕火种的时代。我们可以用npm来安装我们所需要的工具函数和组件库。当然我们也可以自己写的一些工具函数也可以用npm来管理。能够按需引入； 很多时候对于一种大而全的类库是非常大的，而我们可能只会用到其中的一部分，如果不支持按需引入，那么这种
使用webpack+npm创建项目
weixin_42985225的博客
08-24 7161
使用终端进入项目存放位置 全局安装vue npm i vue -g npm i vue-cli -g 进行下载项目 vue init webpack 20180823 打开项目存放地址：可以看到项目已创建完成 下载项目依赖安装包 a 进入下载项目 b 输入 npm install 下载项目依赖的相关安装包 9.1.5. 启动项目 输入 n...
初识 npm script : 用 npm init 快速创建项目
YunWisdom
07-27 2355
初识 npm script 首先介绍创建 package.json 文件的科学方法，目标是掌握 npm init 命令。然后，通过在终端中运行自动生成的 test 命令，详细讲解 npm 脚本基本执行流程。 然后，动手给项目增加 eslint 命令，熟悉创建自定义命令的基本流程。 用 npm init 快速创建项目 开始探索 npm script 之前，我们先聊聊这些 scripts 所依赖的文件 package.json，以它为基础的 npm 则是 node.js 社区蓬勃发展的顶梁柱。 n.
搭建npm私有仓库小结
最新发布
技术客的专栏
08-10 1788
npm由三个不同部分组成：网站 https://www.npmjs.com/使用该网站发现软件包，设置配置文件以及管理npm体验的其他方面。例如，您可以设置组织（组织）来管理对公共或私有软件包的访问。命令行界面（CLI）该CLI从终端运行，并且是如何大多数开发商NPM互动（NPM的cli是随同NodeJS一起安装的）注册表 https://www.npmjs.com/signup该注册表是JavaScript软件及其周围的元信息的大型公共数据库（注册账号后在npm网站自行发布npm包）
如何打造自己的npm库
weixin_34037977的博客
03-02 443
准备工作 node与npm肯定是要有的，这些略过不谈 操作流程 代码规范 首先去github新建一个仓库，然后clone到本地，我们的主要工作环境就在这里啦~ 然后去npm注册一个账号。传送门 注册好之后我们输入npm login进行登录操作，一定要记得在之前验证邮箱，否则后面无法发布。 这里是我们的源代码，与之前不同的是，我们需要做一些处理。 (function (global, name,...
工具函数
xiaojing的博客
02-04 535
前言 在看ecahrts-wordcloud插件源码，想要知道这个插件怎么处理数据的，以致于字符云显示的数据不全，且不是优先显示频率较大的字符的。还没找出来，发现了他有一些工具方法可以借鉴的，所以记下来备用。。。哈哈哈 1、判断是否是NaN function eqNaN(value) { return value !== value; } 除了isNaN()，这样子也可以判断NaN。...
前端开源库-eslint-config-voltrevo
08-29
`eslint-config-voltrevo`便是这样一个针对前端开发的开源库，它提供了一套基于个人开发者喜好设定的ESLint配置，旨在帮助团队或个人快速建立起符合特定编码风格的项目。 ESLint是JavaScript和TypeScript的代码质量...
前端开源库-textlint-rule-max-number-of-lines
08-29
总的来说，“textlint-rule-max-number-of-lines”是一个非常实用的前端工具，它促进了代码的整洁和可读性，有助于提升团队协作效率和代码质量。通过结合其他textlint规则，开发者可以建立一套完整的文本质量检查...
6.ICE.1-npm-webpack：火箭学院6.ICE.1-npm-webpack
02-15
在JavaScript开发中，npm提供了一个巨大的开源库，使得开发者可以便捷地利用其他人创建的工具和库，提高开发效率。通过npm，你可以创建项目依赖关系图，安装、更新或卸载特定版本的包，并通过`package.json`文件来...
【npm】发布 自定义JS工具函数库 到npm中央仓库
YK菌的博客
04-25 1492
文章目录1. 导出所有模块2. 配置webpack3. 打包4. 测试5. 改包描述文件6. 配置npm7. 发布仓库8. 测试9. 更新与删除更新包删除包 对相关自定义模块进行打包发布 【JS】自定义JS工具函数库-封装数组高级方法-unique-cancat-slice-flatten-chunk-difference-pull-drop 这是我的node和npm的版本 1. 导出所有模块 // 暴露函数相关API export { apply } from "./function/apply";
前端开发必备技能知识笔记-自定义工具函数库，并上传npm
花姐夫JUN的博客
06-30 973
前言项目中我们常常需要编写一些函数，用来处理 一些简单的逻辑，不同的项目中用到的工具函数大部门都是一样的，所以每个项目都要重复的添加这些函数，为了减少这部分重复劳动，我们可以创建一个工具函数库将复用率比较高的函数添加到这个库里面，还可以上传到npm，简化添加使用的步骤。1、创建工具函数库项目自己创建一个项目文件夹“user-defined-utils”（文件夹名称不要用中文的，不然后面的操作会报错...
我的nodejs工具函数集
lelehouse的博客
11-20 215
const jsonfile = require('jsonfile'); const json2csv = require('json2csv'); const ASCII = 'ascii'; const BASE64 = 'base64'; const getObjectByKey = function getObjectByKey(arrayObjects = []) { ...
前端工程化-组件化（2）搭建npm私有库
qq_32019935的博客
06-22 619
在前端工程化的过程中，一个只供内部使用的库是必不可少的。一个内部库的出现往往伴随着要产出对应的文档操作
常用工具函数库
weixin_33725807的博客
03-31 342
自己写的前端常用工具函数库，支持npm安装，欢迎start 转载于:https://juejin.im/post/5ca0abc451882567b60ee02a
Java / Web项目中的NPM模块Browser-Sync
最佳 Java 编程
06-03 304
Browser-Sync是一个方便的基于Node.js的NPM模块，可用于更快的Web开发。 浏览器同步可在许多设备之间同步文件更改和交互。 最重要的功能是实时重新加载。 我们也可以在Java / Web项目中使用Browser-Sync。 Cagatay Civici创造了一个伟大的 视频教程如何在PrimeFaces展示柜中使用此模块。 PrimeFaces展示柜具有内置的Jetty服...
全面解析npm：功能、用途、命令和配置
murmuringsOfAJi的博客
04-27 1618
npm（Node Package Manager）是Node.js的官方包管理工具，用于安装、发布、管理JavaScript包和依赖关系。它是世界上最大的软件注册表之一，拥有数百万个包，每天处理数十亿次的下载请求，本文全面解析npm：功能、用途、命令和配置。
最简单的npm包开发（并发布到npm官网）
weixin_42286136的博客
07-21 763
最简单的npm包编写到提交发布npm官网
npm如何创建？
m0_68907098的博客
09-28 1857
npm的创建
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值