dependencies和devDependencies dependencies和devDependencies是项目配置文件中的两个重要部分,它们用于分别列出项目运行时和开发时所需的外部模块或库。...dependencies:项目在实际运行时所依赖的模块或库。这些依赖项是在生产环境中必须安装和包含的包,因为它们包含了项目功能实现的核心代码或是该应用程序直接使用的库。...npm install:安装一个新依赖项到你的项目。 npm install --save:安装一个依赖项,并将其添加到dependencies中。...npm install --save-dev:安装一个开发依赖项,并将其添加到devDependencies中。 npm uninstall:卸载一个依赖项。...这可以防止因不同版本而导致的问题,并确保在不同环境中具有相同的一致性和可预测性。 定期更新:定期运行npm update来更新依赖项到最新版本,以利用最新的改进和安全修复。
npm install在安装node模块时,有两种命令参数可以把它们的信息写入package.json文件。 –save –save-dev 那二者的区别在哪里呢?...–save会把依赖包名称添加到package.json文件dependencies键下,–save-dev则添加到package.json文件devDependencies键下。...下列出的模块,是我们开发时用的依赖项,像一些进行单元测试之类的包,比如grunt-contrib-uglify,我们用它混淆js文件,它们不会被部署到生产环境。...dependencies下的模块,则是我们生产环境中需要的依赖,即正常运行该包时所需要的依赖项。 如果执行npm install命令,默认会安装两种依赖。...如果你只是单纯的使用这个包而不需要进行一些改动测试之类的,只安装dependencies而不安装devDependencies。
-D 安装到当前项目 并写入到devDependencies devDependencies与dependencies 的区别: devDependencies 是本地开发时用的依赖项 dependencies...并写入到devDependencies devDependencies与dependencies 的区别: devDependencies 是本地开发时用的依赖项 dependencies 是生产环境的依赖项...),然后连同版本号手动将他们添加到模块配置文件package.json中的依赖里(dependencies)。...npm install module-name -save 自动把模块和版本号添加到dependencies部分 npm install module-name -save-dev 自动把模块和版本号添加到...里的依赖版本和 yarn 的 lock 文件是否匹配 yarn check # 将当前模块发布到 npmjs.com,需要先登录 yarn publish
前端构建工具就是把开发环境的代码转化成运行环境代码。一般来说,开发环境的代码是为了更好的阅读,而运行环境的代码则是为了能够更快地执行。因此开发环境和运行环境的代码形式也不相同。...处理模块化: CSS和JS的模块化语法,目前都无法被浏览器兼容。因此开发环境可以使用既定的模块化语法,但是需要构建工具将模块化语法编译为浏览器可识别形式。...(2)npm install --save和npm install --save-dev的区别: --save 会把依赖包名称添加到 package.json 文件 dependencies 键下,-...-save-dev 则添加到 package.json 文件 devDependencies 键下。...dependencies是发布后还依赖的,devDependencies是开发时的依赖。
TypeScript 现在,我们将第一个依赖项添加到我们的项目:TypeScript。TypeScript 是 JavaScript 的超集,可在构建时实现类型检查。...参数 -D 将 TypeScript 添加到 devDependencies,因为我们仅在开发和构建期间使用它。...例如,您可以通过键入 yarn server add express 来添加一些新的依赖项。这将直接向 server 包添加新的依赖项。 在后续部分中,我们将开始构建前端和后端应用程序。...如您所见,在此步骤中,我们仅复制与依赖项相关的文件。这是因为 Docker 将每个构建中的命令的每个结果缓存为一层。...因为我们要优化构建时间和带宽,所以我们只想在依赖项发生更改(通常比文件更改发生的频率小)时重新安装它们。 RUN 在 shell 中执行命令。
npm 中的依赖包 这里只说我们常用的两个依赖包 dependenices 和 devDependenices,其它的一些依赖包只有作为包的发布者才会用到,需要的小伙伴自行查看文档。...eslint ,用于进行测试的 jest ,用户使用你的包时即使不安装这些依赖也可以正常运行,反而安装他们会耗费更多的时间和资源,所以你可以把这些依赖添加到 devDependencies 中,这些依赖照样会在你本地进行...前面已经说了 bin 文件的产生,有了 bin 字段,在安装这个模块的时候,node_modules 下面的 .bin/文件夹 下会有对应模块的文件,和模块中的文件相同,然后我们就可以通过调用这个文件脚本中的方法传入参数了...数组中 npm run serve params // 将params参数添加到process.env.argv数组中 npm run serve -- params // 将params参数添加到...npm 包如何调试 在本地开发的模块包的时候,可以使用 npm link 调试,将模块链接到对应的运行项目中去,方便地对模块进行调试和测试。
需要注意的是,一个模块会不会被打包取决于我们在项目中是否引入了该模块,跟该模块放在dependencies中还是devDependencies并没有关系。...resoloved: 包的安装源 integrity:一个hash值,用来校验包的完整性 dev:布尔值,如果为true,表明此包如果不是顶层模块的一个开发依赖(写在devDependencies中)...requires: 对应子依赖的依赖,与依赖包的package.json中dependencies的依赖项相同 dependencies:结构与外层结构相同,存在于包自己的node_modules中的依赖...如果有,把他们添加到克隆树中,依赖会尽可能的添加到最高层 比较原始树和克隆树,列出将原始树转换为克隆树所要采取的具体步骤 执行,包括install, update, remove and move 以npm...模块的安装顺序决定了当有相同的依赖时,哪个版本的包会被安装在顶层。首先项目中主动引入的包肯定会被安装在顶层,然后会按照包名称排序(a-z)进行依次安装,跟包在package.json中写入的顺序无关。
你可以通过它使用全世界开发者的代码,或者分享自己的代码。代码通过包(package)(或者称为模块(module))的方式来共享。...yarn add [package]@[tag] // 安装某个tag(比如beta,next或者latest) 【3】将依赖项添加到不同依赖项类别 不指定依赖类型默认安装到dependencies里...,你也可以指定依赖类型分别添加到 devDependencies、peerDependencies 和 optionalDependencies yarn add [package] --dev 或 yarn...yarn remove [package] // 移除包 【6】安装package.json里的包依赖,并将包及它的所有依赖项保存进yarn.lock yarn 或 yarn install // 安装所有依赖...【7】发布包 yarn publish 【8】运行脚本 yarn run // 用来执行在 package.json 中 scripts 属性下定义的脚本 【9】显示某个包的信息 yarn info
接下来,本文将针对 npm 中的你可能忽略的细节和大家分享一些经验。 npm 安装机制 A 和 B 同时依赖 C,C 这个包会被安装在哪里呢?C 的版本相同和版本不同时安装会有什么差异呢?...node_modules 中,直到子依赖不再依赖其他模块。...npm 3 会遍历所有的节点,逐个将模块放在 node_modules 的第一层,当发现有重复模块时,则丢弃, 如果遇到某些依赖版本不兼容的问题,则继续采用 npm 2 的处理方式,前面的放在 node_modules...中 dependencies 的依赖项相同 dependencies :结构和外层的 dependencies 结构相同,存储安装在子依赖 node_modules 中的依赖包 需要注意的是,并不是所有的子依赖都有...文件中手动添加依赖; bundledDependencies 这个依赖项也可以记为 bundleDependencies,与其他几种依赖项不同,他不是一个键值对的对象,而是一个数组,数组里是包名的字符串
因为在package.json文件中,有详细的项目描述, 包括: (1)项目名称:name (2)版本:version (3)依赖文件:dependencies 等等.. 1....创建node.js项目步骤 (1) 创建package.json文件 (2) 运行npm install 创建node_modules这个文件夹 (3) 编写node.js文件,使用相应外部模块 2....添加dependencies 当使用npm install 安装包文件时,如果添加 --save 命令,则npm会把相应的包文件名称添加到package.json的dependencies中 6. devDependencies...--save 和 --save-dev的区别 --save 是把包的名称添加到dependencies中的, --save-dev 是把包的名称添加到devDependencies中的 7. devDependencies...和 dependencies dependencies中依赖的是代码中的包和模块 devDependencies中是依赖项目管理工具的 gulp webpack grunt 等等
npm、pnpm、yarn的常用命令 一、常用命令 1、npm命令 npm init: 初始化一个新的npm包。 npm install: 安装项目依赖项。...npm install --save-dev : 安装包并将其添加到 devDependencies 列表中。 npm update: 更新所有已安装的包。...2、pnpm命令: pnpm init: 初始化一个新的npm包。 pnpm install: 安装项目依赖项。 pnpm install : 安装指定的包。...pnpm add : 安装包并将其添加到 dependencies 列表中。 pnpm add --save-dev: 安装包并将其添加到 devDependencies 列表中。...yarn add : 安装包并将其添加到 dependencies 列表中。 yarn add --dev: 安装包并将其添加到 devDependencies 列表中。
webpack-cli 作为 dev 依赖项 npm i webpack@4 webpack-cli@3 -D i:install -D:- save-dev 注:在 webpack 3 中,webpack...和它的 CLI 都是在同一个包中,但在第4版中,他们已经将两者分开来更好地管理它们。...首先,我们需要 css-loader 解析 css 文件(将类似 @import 和 url(...)的方法实现 require 的功能),然后使用 style-loader 将样式添加到 DOM。...默认情况下,webpack 使用从右边(数组中的最后一个元素)到左边(数组中的第一个元素)执行加载器。...3.使用 CSS 模块化 CSS 模块化将类名的作用域可以仅针对相关组件 ... module.exports = { module: { rules: [ ...
它的一个很重要的作用就是:将开发者从繁琐的包管理工作(版本、依赖等)中解放出来,更加专注于功能的开发。 如何使用 NPM 安装 npm 不需要单独安装。...,即出现在 packages.json 文件的哪一项中。...—save:模块名将被添加到 dependencies,可以简化为参数-S。 —save-dev:模块名将被添加到 devDependencies,可以简化为参数-D。...这个可以说是我们 npm 核心一项内容,依赖管理,这个对象里面的内容就是我们这个项目所依赖的 js 模块包。...npm install 默认会安装 dependencies 字段和 devDependencies 字段中的所有模块,如果使用 —production 参数,可以只安装 dependencies 字段的模块
它的一个很重要的作用就是:将开发者从繁琐的包管理工作(版本、依赖等)中解放出来,更加专注于功能的开发。 如何使用 NPM 安装 npm 不需要单独安装。...,即出现在 packages.json 文件的哪一项中。...–save:模块名将被添加到 dependencies,可以简化为参数-S。 –save-dev:模块名将被添加到 devDependencies,可以简化为参数-D。...这个可以说是我们 npm 核心一项内容,依赖管理,这个对象里面的内容就是我们这个项目所依赖的 js 模块包。...npm install 默认会安装 dependencies 字段和 devDependencies 字段中的所有模块,如果使用 --production 参数,可以只安装 dependencies 字段的模块
一层含义是Node的开放式模块登记和管理系统,网址为npmjs.org。另一层含义是Node默认的模块管理器,是一个命令行下的软件,用来安装和管理Node模块。npm不需要单独安装。...$ npm list # 列出全局安装的模板 $ npm list -global 6、npm install node模板通过这个命令来安装,有全局安装:指的是将一个模板安装到系统目录中,各个项目都可以调用...;有本地安装:指的是将一个模板下载到当前项目的node_modules子目录中,然后只有在项目目录中,才能调用这个模板。...7、-save和-save-dev -save:模板名将被添加到dependencies(dependencies字段指定了项目运行所依赖的模板),可以简化为-S -save-dev:模板名将被添加到...如果你是用来-save和-save-dev参数,那么就会安装相应的模板,然后将参数写入到package.json的dependencies字段或DevDependencies字段中。
复杂的模块依赖关系需要被记录,确保模块的版本和当前保持一致,否则会导致当前项目运行报错 (2)package.json文件的作用 项目描述文件,记录了当前项目信息,例如项目名称、版本、作者、github...地址、当前项目依赖了哪些第三方模块等。...(3)项目依赖 在项目的开发阶段和线上运营阶段,都需要依赖的第三方包,称为项目依赖 使用npm install 包名命令下载的文件会默认被添加到 package.json 文件的 dependencies...,称为开发依赖 使用npm install 包名 --save-dev命令将包添加到package.json文件的devDependencies字段中 { "devDependencies":...,因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址,重新安装时只需下载即可,不需要做额外的工作
2. devDependencies devDependencies 中声明的是开发阶段需要的依赖包,如 Webpack、Eslint、Babel 等,用于辅助开发。...当打包上线时并不需要这些包,所以可以把这些依赖添加到 devDependencies 中,这些依赖依然会在本地指定 npm install 时被安装和管理,但是不会被安装到生产环境中。...3. peerDependencies 有些情况下,我们的项目和所依赖的模块,都会同时依赖另一个模块,但是所依赖的版本不一样。...但是,有一种情况,会出现问题,就是这种依赖关系将暴露给用户。 最典型的场景就是插件,比如 A 模块是 B 模块的插件。...Babel、Autoprefixer 和其他工具会用到它,以将所需的 polyfill 和 fallback 添加到目标浏览器。
常用配置项 files files定义了哪些文件应该被包括在 npm install 后的 node_modules中。...devDependencies devDependencies可以理解为开发环境依赖,通常是一些工具类的包,比如 webpack, babel等。...通过npm install --save-dev安装的依赖包都会进入到devDependencies中。 但是,在结合一些构建工具使用时,我们往往会有困惑。...让“调包侠”将package-a的依赖提升到自己的node_modules中,这样可以在“调包侠”和package-a都需要同一个依赖(比如vue)时,避免重复安装。这常见于开发组件或者库。...但是,在开发组件时,一般还需要本地开发环境跑一个 demo 试试效果,这时候是依赖 vue 的,所以还需要在 devDependencies 中安装 vue 。
领取专属 10元无门槛券
手把手带您无忧上云