记录一下我离线依赖迁移安装的具体尝试过程

blueju 等级 388 0 0

首发于 语雀文档

第 1 次

直接安装,不可行,因为是私有依赖,根本安装不上。

第 2 次

流程:

  1. 拷贝依赖到项目目录 library 中
  2. 通过 webpack alias 别名的方式关联依赖


不可行,npm run start 运行报错,缺少依赖。

想想也是, 依赖的依赖其实在我们 npm install 的时候也是一起安装上的, 而我通过上述流程 1→2 的方式关联依赖,缺少了依赖的依赖被安装的过程,自然会报缺少依赖的错误。

第 3 次

依赖 react-color-ui 依赖 react-color-ui 的依赖 react-input-tags 均为私有依赖,无法通过 npm install 安装

希望通过离线安装依赖的方式。

  1. 在外网机中使用 npm-pack-all 命令将 react-color-ui 依赖打包成了 tgz 文件
  2. 将 tgz 文件拷贝入内网机,并放置到项目根目录中
  3. 使用 npm install react-color-ui.tgz --save 命令安装 react-color-ui
  4. 安装失败,提示报错:无法获取 react-input-tags 依赖

    其实是因为我的 react-color-ui 项目目录下的 node_modules 不全,导致依赖没打包好。 这也就是为什么更推荐大家使用 npm install xxx -g 全局安装的方式安装依赖。 因为全局安装的特点就是:这个包的所有依赖包都安装在了自己的目录下的 node_modules 子目录里。

第 4 次

  1. 安装 npm-pack-all,用于将依赖打成 tgz 格式的离线安装包
  2. 将 react-color-ui(源码包)中的除 node_modules 和 dist 外的文件删除
  3. 将 react-color-ui(源码包)dist 目录下除 node_modules 外的文件剪切到 react-color-ui(源码包)的根目录下
  4. 删除 react-color-ui(源码包)的 dist 目录
  5. 在 react-color-ui(源码包)目录下打开 git bash,执行 npm-pack-all,将依赖打包成离线安装包

    其实就是模拟 npm install 全局安装的效果。 全局安装的特点就是:这个包的所有依赖包都安装在了自己的目录下的 node_modules 子目录里。

产出

最后总结一下我产出了什么

  1. react-color-ui 依赖安装指南

  2. react-color-ui 离线安装包制作指南

  3. react-color-ui-版本号.tgz 离线安装包

  4. 将另一个私有依赖也使用该方式安装到项目中

    通用做法

    当然,以上是为适配我项目的一点变通做法(尤其是234步),通用的做法是:(和参考文章其实差不多)

  5. 使用 npm install -g xxx 命令全局安装依赖

  6. 找到所安装依赖文件位置

  7. 右键打开 git bash,执行 npm-pack-all,将依赖打包成 tgz 格式的离线安装包

  8. 将离线安装包拷贝入内网机的项目根目录中

  9. 右键打开 git bash,npm install xxx --save 将依赖安装

  10. Success!!!

    参考文章

  11. 离线环境安装npm包

收藏
评论区

相关推荐

教你用200行代码写一个爱豆拼拼乐H5小游戏(附源码)
前言 本文将带大家一步步实现一个H5拼图小游戏,考虑到H5游戏的轻量级和代码体积,我没有使用react或vue这些框架,而采用我自己写的dom库和原生javascript来实现业务功能,具体库代码可见我的文章如何用不到200行代码写一款属于自己的js类库(https://juejin.im/post/6844903880707293198),构建工具我采
vue-toy: 200行代码模拟Vue实现
vuetoy 200行左右代码模拟vue实现,视图渲染部分使用React来代替Sanbbdom,欢迎Star。 项目地址:https://github.com/bplok20010/vuetoy(https://github.com/bplok20010/vuetoy) codesandbox示例(https://codes
React系列之高阶组件
我的前端学习笔记📒 最近花了点时间把笔记整理到语雀上了,方便童鞋们阅读 我的前端学习笔记📒(https://www.yuque.com/wanggangfeng
做了N+1个企业项目之后, 我总结了这些React必备插件
为了提高大家开发 React 项目的效率, 笔者结合自己的实际工作经验, 汇总如下React项目常用插件. 1. 状态管理 Redux JavaScript 状
一起走进React核心团队
当我刚来Facebook的React团队工作时,我不确定接下来的工作会怎么样。表面看,React核心团队似乎很大!但事实证明,像Eli White和Sebastian McKenzie这样的人都在React Native团队。考虑加上那些维护开源库的维护者,比如Chakra UI、Framer Motion,React核心团队人数似乎能填满整个体育场!但事实
做了N+1个企业项目之后, 我总结了这些React必备插件
为了提高大家开发 React 项目的效率, 笔者结合自己的实际工作经验, 汇总如下React项目常用插件. 1. 状态管理 Redux JavaScript 状
Hook 规则 – React
Hook 规则 _Hook_ 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 Hook 本质就是 JavaScript 函数,但是在使用它时需要遵循两条规则。我们提供了一个 linter 插件(https://www.npmjs.com/package/
React的未来:服务端组件
作者 | Donovan So 译者 | 许学文 策划 | 蔡芳芳 服务端组件和 SSR 有哪些不同? 本文最初发布于 Medium 的 Donovan So 专栏,经 InfoQ 翻译并分享。 服务端组件是什么? 截至目前,我们对 React 组件的了解只是客户端组件,仅此而已。 然而,React 团队正在试验一个新的想法,那就是将 Reac
有关CSS预编译、管理工具和网络安全的相关面试题
我经常会听到一些想入行前端的人问,前端开发需要学习哪些技术?其实,除了核心的HTML、CSS、JavaScript技术外,像CSS预编译、前端框架,如Vue,React、Node、Angular;代码管理工具,如git,代码编辑器,sublime text,还有测试,网络安全等相关技术也是需要会一些。当然要求可能不会那么高,但至少要懂一些。所有今天准备了一些
记录一下我离线依赖迁移安装的具体尝试过程
首发于 <a name"F7lHq"</a 第 1 次直接安装,不可行,因为是私有依赖,根本安装不上。<a name"elctO"</a 第 2 次流程:1. 拷贝依赖到项目目录 library 中1. 通过 webpack alias 别名的方式关联依赖<br /不可行,npm run start 运行报错,缺少依赖。 想想也是, 依
Hook 规则 – React
Hook 规则_Hook_ 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。Hook 本质就是 JavaScript 函数,但是在使用它时需要遵循两条规则。我们提供了一个 来强制执行这些规则: 只在最顶层使用 Hook不要在循环,条件或嵌套函数中调用 Hoo
React之集成测试 – 测试概览
你可以用像测试其他 JavaScript 代码类似的方式测试 React 组件。现在有许多种测试 React 组件的方法。大体上可以被分为两类: 渲染组件树 在一个简化的测试环境中渲染组件树并对它们的输出做断言检查。 运行完整应用 在一个真实的浏览器环境中运行整个应用(也被称为“端到端(endtoend)”测试)。本章节主要专
React之集成测试 –测试环境
本章节介绍了可能会影响你测试环境的因素,并包含某些场景下的建议。 测试运行器使用 ,, 等测试运行器能像编写 JavaScript 一样编写测试套件,并将其作为开发过程的环节运行。此外,测试套件也将作为持续集成的环节运行。 Jest 与 React 项目广泛兼容,支持诸如模拟 、 和 等特性。如果你使用 Create React App,且
React 之设计原则
编写该文档的目的是,使开发者更易于了解我们如何决策 React(应该做哪些,不应该做哪些),以及我们的开发理念。我们非常欢迎来自社区的贡献,但如若违背这些理念,实非我们所愿。 注意: 文章描述了 React 自身的设计原则,而非 React 组件或应用,阅读者需要对 React 有深入的理解。 如需 React 的入门文档,查看 。
如何在React Native和Expo中掩盖Text和TextInput组件
在本文中,我将向您展示如何在React Native和Expo中使用自定义蒙版,可用于iOS,Android和Web!我们将使用一个名为库,这是一个没有本机代码的完整javascript库,然后您可以在React Native环境的所有CLI中使用。](https://res.cloudinary.com/practicaldev/image/fetch/s