>摘要：包与NPM Node组织了自身的核心模块，也使得第三方文件模块可以有序的编写和使用。本文分享自华为云社区[《NodeJs深入浅出之旅：包与NPM》](https://bbs.huaweicloud.com/blogs/307034?utm_source=zhihu&utm_medium=bbs-ex&utm_campaign=other&utm_content=content)，作者：空城机。 # 包与NPM Node组织了自身的核心模块，也使得第三方文件模块可以有序的编写和使用。 但是在第三方模块中，模块与模块之间仍然是散列在各地的，**相互之间不能直接引用** 所以在模块外，包和NPM是将模块联系起来的机制。 - 包组织模块示意图  CommonJS 的包规范定义其实也很简单，由包结构和包描述文件两部分组成。 # 包结构 用于组织包中的各种文件，是一个存档文件，即一个目录直接打包为.zip或tar.gz格式的文件。 符合规范的包目录： - package.json: 包描述文件 - bin: 用于存放可执行二进制文件的目录 - lib: 用于存放JavaScript代码的目录 - doc: 用于存放文档的目录 - test: 用于存放单元测试用例的代码 # package.json包描述文件 NPM所有行为都与包描述文件的字段息息相关 一些字段： - name: 包名。 规范定义需要用小写的字母和数字组成，不允许出现空格。 包名必须是唯一的，以免对外公布时产生重名冲突 - description: 包简介 - version: 版本号，关于其介绍在《Node.js学习（一）——简介》也有提及 - keywords: 关键字数组， NPM中主要用来作分类搜索。 - maintainers: 包维护者列表。 每个维护者由name、email和web这3个属性组成。 NPM通过这个属性进行权限认证。 格式： ```"maintainers":[{ "name":"kongchengji", "email":"111@.com", "web":"[http:](https://blog.csdn.net/qq_36171287)" }]``` - contributors: 贡献者列表，格式与维护者列表相同 - bugs: 一个可以反馈bug的网页地址或邮件地址 - licenses: 当前包所使用的许可证列表，表示包在哪些许可证下使用 格式： "licenses":[{ "type": "GPLv2", "url":"" }] // 或者 "license": "ISC" - repositories: 托管源代码的位置列表，表明可以通过哪些方式和地址访问包源代码。 - 格式： - "repository": { - "type": "git", - "url": "git+https://github.com/kongchengji/UiSelfMade.git" - }, - dependencies: 使用当前包所需要依赖的包列表。 这个属性非常重要 - homepage: 当前包的网站地址 - os: 操作系统支持列表， 如果列表为空，则不对操作系统做任何假设 - cpi: CPU架构支持列表 - engine：支持的JavaScript引擎列表 - directories：包目录说明 - implements： 实施规范的列表。 标志当前包实现了CommonJS哪些规范 - scripts： 脚本说明对象。 主要用于被包管理器用来安装、编译、测试和卸载包 "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "lint": "eslint --ext .js,.vue src", "build": "node build/build.js" }, NPM与包规范区别在于多了四个字段： - author： 包作者 :ok_man: - bin: 一些包作者希望包可以作为命令行工具使用。 - main: 模块引入包时，会有限检查这个字段，并将其作为包中其余模块的入口模块。 如果不存在，require会查找包目录下的index.js、index.node、index.json作为默认入口 - devDependencies： 一些模块只在开发时需要依赖。 devDependencies：开发环境使用 dependencies：生产环境使用 # 前后端共用模块 JavaScript在Node出现后，有一项优势 --> 一些模块可以在前后端实现共用。 但是前后端上始终还是有一些差别的 :sweat_drops: # 前后端模块侧重点 前后端JavaScript分别搁置在HTPP的两端，扮演的角色并不同。 浏览器端的JavaScript需要经历从同一个服务器端分发到多个客户端执行，瓶颈是带宽，从网络加载代码 服务器端的JavaScript是相同代码需要多次执行，瓶颈是CPU和内存等资源，从磁盘中加载 在前端JavaScript中，主要还是应用**AMD规范**。 CommonJS并不完全适用于前端JavaScript，比如Node的模块引入基本是同步的，但是前端引入如果使用同步引入，UI在初始化过程中需要花费很多时间等待脚本加载完成。 # AMD规范 AMD规范 是CommonJS规范的一个延伸，全称：Asynchronous Module Definition。 是异步模块定义 模块定义：define(id?, dependencies?, factory); id 是模块的名字，它是可选的参数。 dependencies 指定了所要依赖的模块列表，它是一个数组，也是可选的参数 AMD需要在声明模块时指定所有的依赖，通过形参传递依赖到模块内容中： define(['./a', './b'], function (dep1, dep2) { a.doSomethimg() b.doSomething() }); # CMD规范 与AMD规范相对的还有CMD规范，全称：Common Module Definition。 是公共模块定义 这是由国内的玉伯（也是一位大佬）提出的 模块定义：define(factory) CMD支持动态引入： define(function(require, exports, module) { var a=require('./a') a.doSomethimg() var b=require('./b') b.doSomething() }) 在需要依赖模块时， 随时调用require()引入即可 CMD 推崇依赖就近; AMD 推崇依赖前置 CMD 是延迟执行; AMD 是提前执行 CMD性能好,因为只有用户需要的时候才执行; AMD用户体验好,因为没有延迟,依赖模块提前执行了 AMD和CMD最大的区别是对依赖模块的执行时机处理不同 # 兼容多种模块规范 创建一个hello方法，让hello方法能在不同运行环境中运行，兼容Node、AMD、CMD和常见浏览器 匿名函数前加一个;是个好习惯 name是方法名，definition是方法体 通过typeof检测环境是否为AMD或CMD还是Node环境 可以将模块执行结果挂载在window变量中，这样可以直接调用 // 匿名函数前加一个;是个好习惯 name是方法名，definition是方法体 ;(function (name, definition) { //检查环境是否是AMD或CMD var hasDefine = typeof define === 'function', // 检查环境是否为Node hasExports = typeof module !== 'undefined' && mudule.exports; if(hasDefine) { define(definition); } else if (hasExports) { module.exports = definition(); } else { // 将模块的执行结果挂在window变量中，在浏览器中this指向window对象 this[name] = definition(); } })('hello', function () { var hello = function () { console.log('hello'); } return hello; });

本文借鉴于CSDN博主「FencingMan-X」，向博主致敬！ 原文链接：https://blog.csdn.net/oqzuser1234asd/article/details/116169889 ## 1、问题描述 通过npm install windows-build-tools来获取Python2.7环境时，windows-build-tools不能正常完成安装。## 2、问题现象 执行npm install --global --production windows-build-tools 卡在reify:ajv这个步骤页面不动了 ## 3、问题原因 Windows-build-tools脚本存在问题，无法找到VS构建工具安装程序的日志文件。似乎VS构建工具安装程序创建的日志文件已更改。该脚本正在文件夹％USERPROFILE％\ AppData \ Local \ Temp中寻找名称以dd_client_开头的日志文件，但是VS构建工具安装程序似乎并未创建任何以dd_client_开头的文件。 （这是windows-build-tools安装脚本的一个BUG，感兴趣可以查看github的issue：https://github.com/felixrieseberg/windows-build-tools/issues/244 ）## 4、解决方案 1、打开资源管理器（左下角搜索-资源管理器或者直接window+E），在路径处输入`%temp%` 2、在`%temp%`文件夹中找到最新的文件名类似于`dd_installer_20211126145101.log`的文件，查看此文件，确保日志中输出了`Closing the installer with exit code 0` 3、在`%temp%`目录下创建一个名为`dd_client_.log`的文件 4、编辑创建的文件，加入一行`Closing installer. Return code: 3010.`然后保存。 5、回到执行安装命令的窗口，敲一下回车，即会继续安装windows-build-tools的步骤。 6、安装成功后，新打开一个终端窗口，检查Python版本 ## 后语 其实Python环境在安装步骤卡着不动时就已经安装好了，只是环境变量没有配置好。 * 下面是我在安装途中卡住的时候的截图： >* Python所在文件位置 >

CloudIDE安装 npm install 时报如下错误，请问是什么问题呢这个是DevStar里在线像素绘图工具里的请问这是什么问题呢

【功能模块】Procode【操作步骤&问题现象】教程说明报错，后来发现【截图信息】【日志信息】（可选，上传日志内容或者附件）

npm发布包以及更新包还有需要注意什么问题

JSAPI可以不可以通过npm方式安装??

不久前，尤雨溪发布了 Vue 3.0 Beta 版本。发布之后我们对社区里的前端开发者做了一次调查沟通，大家普遍认为 Vue 已经具备了商业项目开发的必备条件，如语法精炼、优雅而简洁、代码的可读性高、成熟的组件模块化能够让开发者从编码中获得乐趣等等，当然，还有商业项目开发最为看重的与第三方控件的结合能力。正是这些能力，确保了“后浪” Vue 能够与 React、Angular 等老牌前端开发框架并驾齐驱，在国内开发者当中占据越来越重要的位置，逐渐有发展成为国内三大前端框架之首的趋势。不过，在读者看来，Vue 作为近几年发展最快的JS框架， 其崛起主要原因不单单是因为粉丝的过度追捧，也并不是因为某个大公司的权威推动。和 React、Angular 相比，Vue 在可读性、可维护性和趣味性之间做到了很好的平衡，结合我们之前为大家推荐过的纯前端表格控件 SpreadJS，有用户表示仅通过一周的自学就搞出来了一个可供企业内部使用的表格协同文档系统。本文我们将通过分析  Vue 的特性，谈谈为什么商业项目开发我更推荐 Vue，而不是React 和 Angular。Vue、React、Angular 优势对比这个对比表应该可以代表大部分人对于三大前端框架的理解。React 的灵活性很高，这就决定了它的上限也很高。但 React 相对于 Vue，规矩更多，为了让项目代码等规矩更有条理性，需要更多的代码来实现，假如有一天我们不在依赖一大堆npm包和ES5编译器，要做出React应用简直是难如登天。而相比 React 所强调的所谓JS纯净性和代码可读性，Angular 的确算得上一款优秀的前端框架。Angular 可以帮助我们快速进入开发，在代码的头一千行，我们会感到很有趣，但在那之后，代码将开始变得糟糕起来。大部分时间，你都会迷失在各种指令和作用域里，代码管理难度将会劝退大部分新来的开发人员。因此，Angular 的主要问题就是太难了，入门难、做项目也难，哪怕是个资深的前端工程师也会头痛，但前期的投入换来的是后期的低维护压力。对此，网上专门有人总结了一个公式： React = Think in JS, everything is JS + Data (structure) Angular = Think in OO + Patterns (lots of) + 最佳实践Vue 很好的借鉴了二者的设计理念，并融会贯通。对于大部分开发者来说，它优雅而简洁，可以让我们把注意力集中在解决问题，而非代码逻辑上。Vue 的独特优势Vue 和其他前端框架相比，在结构、样式、业务分离等方面更清晰彻底，更符合前端多年来的编码习惯，更符合直觉、更容易学习和维护。入门非常容易，资料丰富，框架功能完善，加入非常多的特性，例如，if, for, async,为开发者节省很多垃圾代码。模板支持 html 和 jsx，支持自定义指令，方便操作 dom 的一致行为。一、门槛低、上手快Vue 上手简单的原因是无需复杂配置，只需要一个 HTML 与相关文件就能跑起来。从设计的角度上来看，Vue 考虑的也是如何降低门槛，让只掌握了 Web 基础知识 (HTML, CSS, JS) 的情况下，能够最快理解和上手，从而实现和完成一个应用。和 React、Angular 相比，Vue 的中文文档是写的最好的，再加上国内有非常丰富的视频、图文教程、各种开源的插件，哪怕是一个新手前端开发，学习一周左右就可以搞一个项目出来。就如我们开头所说，配合第三方前端表格控件 SpreadJS，自学一周就能做出一个企业级的表格协同文档。所以，它对于非专业前端，或者前端入门人士来说是非常适合的。其次，Vue 设定多，所以需要思考的就少。属性指令定义了一大堆，API 文档整理好的就在那里，需要什么一查，最佳实践的 demo 写好了放在那边，照着写就 OK 了。二、人性化，符合用户习惯React 的设计理念是提供强大而复杂的机制，让开发者来适应我；而 Vue 则是为了更适应开发者的使用习惯，在很多设定上都是让开发者怎么爽怎么来。比如 Vue 的 API 跟传统 Web 开发者熟悉的模板契合度非常高。Vue 的单文件组件是以模板+JavaScript+CSS 的组合模式呈现，它跟 Web 现有的 HTML、JavaScript、CSS 能够更好地配合；Vue 提供反应式的数据，当数据改动时，界面就会自动更新，而 React 里面则还需要调用方法 SetState。三、Vue + 第三方控件 = 效率高 & 使用便利 & 组件化架构前面我们提到了 Vue 的两个基础特性，但能成为时代的发展趋势，  说明 Vue 的能力远不止于此。从我们团队使用 Vue 的情况来看，Vue 使用起来异常简单，它从 React 那里借鉴了组件化、prop、单向数据流、性能、虚拟渲染，并意识到状态管理的重要性，并从 Angular 那里借鉴了模板，并赋予了更好的语法，以及双向数据绑定（在单个组件里），它不强制使用某种编译器，所以你完全可以在遗留代码里使用Vue，并对之前乱糟糟的jQuery代码进行改造。即便，仍然有很多人认为 Vue 只适合开发简单的网站或者单页面应用，但其实 Vue 有着比 React 和 Angular 更为丰富多元的第三方控件资源。配合这些资源使用，Vue 做企业级项目甚至比其他框架来的更加便利高效。这里我们还是用第三方控件 SpreadJS 举例，看看苏宁易购是如何在短短一周内，搭建并上线一个企业级的表格协同文档系统的。通过嵌入 SpreadJS 在线编辑器，开发的系统界面苏宁易购作为我国领先的 O2O 智慧零售商，在实现协同办公之前处理内部信息的办法是：在 Excel 上安装插件，通过插件与数据库通信，实现数据权限管控，这样做非常的低效且混乱。为了提升效率实现真正的协同办公，它们采购了 SpreadJS 纯前端表格控件，为其构建基于 Web 端 + Vue 集成的 Excel 数据管理系统 —— 「极客办公平台」。极客办公平台界面截图之所以选用 Vue 作为前端框架，是因为 Vue 本身通过提供现成的范式让整个项目的搭建过程更加快捷。题外话：其实在选择 Vue 之前，项目组已经尝试过 React 框架，但是一次又一次的整理prop和重构微组件的过程让其痛不欲生。而之所以选用 SpreadJS ，是因为它已经实现了微软 Office Excel 90%  以上的内置功能，开发人员无需安装任何软件，只需增加一些 UI 样式和下拉框，就可以迅速交付一套完整的基于 Web 的 Excel 功能模块。据苏宁易购系统架构师候健的分享所述，为保证新老系统顺利过渡，需要投入人力，完成大量的 Excel 数据迁移工作，因此，新老系统对 Excel 文件的兼容性至关重要。而借助 SpreadJS 纯前端无损导入导出 Excel 这一产品特性，极客办公平台才得以顺利完成交付并迅速投入使用。点击此处，了解 SpreadJS与Vue集成，苏宁集团“极客办公”系统的开发案例。为什么选择 Vue + SpreadJS？使用 Vue + SpreadJS 可以快速搭建一套在线协同表格文档，无论是对于文档的性能、项目研发效率，以及后期维护成本和新老系统数据迁移成本来说，它们都是一对“最佳拍档”。SpreadJS 提供了类 Excel 的操作界面和开放的 API，将其嵌入系统，可快速实现 Excel 导入导出、公式计算、在线填报数据、打印报送、实时预览、数据校验、服务端数据交互等功能，通过对其二次扩展，可以将 SpreadJS 作为在线文档协同编辑系统的核心模块，满足多人协作、实时编辑、数据同步、多级上报、历史查询等业务需求。经过实测，借助 Vue + SpreadJS，可以实现用不到 100 行代码，将 Excel 的功能和使用体验完美嵌入到在线文档系统中。如上面苏宁易购的例子，在 Vue 对应的页面组件 mount 中重新调用初始化方法，实现高度类似 Excel 的表单布局，仅需如下代码：Vue —— 契合当下的大势所趋我们已经在过去无数次尝试使用 Vue 为不同的项目开发了很多代码，结果也很令人满意（每个项目周期不超过 3 个月）。也许，3 个月对于后端开发来说算不上什么，但在JS世界里，它举足轻重。文无第一武无第二，无谓的争论谁比谁好并没有什么意义，本文也并不是希望将这三个框架分个高下，而是希望可以给大家提供更多参考信息，根据自身项目的实际需求来选择更适合的框架。从客观事实来说，最具创新力的是 React，而最具企业级能力的是 Angular，能够取长补短，各项数据介于两者之间的是 Vue。正是因为 Vue 具备门槛低、易上手、人性化、效率高等特点，外加有着最为丰富的中文资源和诸如 SpreadJS 等优秀的第三方控件加持，开发者们得以实现项目的“短平快”开发。在这个追求「快速」和「变化」的时代，这款前端框架的定位明显更契合时代的主流需求。即便 Vue 的作者尤雨溪曾多次表示，如果多年以后要论历史地位，React 肯定是高于 Vue 的。不过历史地位并不是开发者需要考虑的问题，我们可以为某一个编程语言、某一种框架的社区发展贡献力量，但在实际的项目中，不能盲目的被束缚住。文中资源扩展阅读：Vue  官方文档：https://cn.vuejs.org/v2/guide/SpreadJS 官网：https://www.grapecity.com.cn/developer/spreadjs苏宁集团开发案例：https://www.grapecity.com.cn/blogs/spreadjs-system-development-case-of-suning

npm镜像麻烦添加下sqlite3的二进制node_sqlite3_binary_host_mirror=http://npm.taobao.org/mirrors/node_sqlite3_binary_host_mirror=华为云地址npm install 涉及到sqlite3二进制的时候, 会从amazonaws下载, 被墙了, 下载不动.

华为 NPM 源: https://mirrors.huaweicloud.com/repository/npm/@pm2%2fpm2-version-check官方 NPM 源: https://registry.npmjs.org/@pm2/pm2-version-check/

运行本地服务器之后打开网页没有资源。 用的Vue创建的项目

vue项目构建失败。npm构建任务中默认是么有安装sass-loader。我在镜像站里面也搜不到这个资源。所以想请问这个要怎么安装？错误信息：notarget No matching version found for sass-loader@9.0.3

比如某个包在官方源更新后，huawei mirror还没有更新，会fallback到官方源去下最新包吗？是否用户需要等huawei mirror更新后才能正常使用呢？

感谢华为云提供的优质 NPM 镜像，目前使用时发现一个小问题，希望能处理一下。https://mirrors.huaweicloud.com/repository/npm/rc-time-pickerrc-time-picker 3.7.3 返回的下载地址是官方源地址而非华为云的地址，导致有时还是会因为本地网络问题下载包失败。这个包的其它版本正常，暂时也没发现其它包有类似问题。