标签: npm-link

无法通过 npm 链接使用 Vue 组件库

我正在同时构建一个 Vue 应用程序和一个 Vue 组件库。因此,我想使用 npm 链接设置库,这样我就不必继续发布我的库包并将其重新安装在我的主应用程序中。

我的包将被称为@company/vue. 我可以将其发布到 npm 并在我的 Vue 应用程序中安装/使用它,如下所示:

import Vue from 'vue';
import VueComponents from '@company/vue';

Vue.use(VueComponents);
Run Code Online (Sandbox Code Playgroud)

效果很好。我可以访问 .vue 文件中的组件等等。

但是,如果我按照标准步骤链接我的库:

  1. cd 路径/到/库
  2. npm 链接
  3. cd 路径/到/应用程序
  4. npm 链接@company/vue

启动开发模式后,我收到此警告:

export 'default' (imported as 'VueComponents') was not found in '@company/vue'
Run Code Online (Sandbox Code Playgroud)

当然,页面中没有任何内容加载。

我必须想象我可能把它捆绑错了?

我的构建脚本如下所示:

vue-cli-service build --no-clean --target lib --name company-vue src/index.js
Run Code Online (Sandbox Code Playgroud)

它指的是我的index.js:

vue-cli-service build --no-clean --target lib --name company-vue src/index.js
Run Code Online (Sandbox Code Playgroud)

这只是我见过的大多数图书馆的标准方式。再说一遍,如果我从 npm 中提取包,它就可以正常工作。

这是与我的 package.json 中的捆绑相关的内容:

import './index.scss';

import * as components from …
Run Code Online (Sandbox Code Playgroud)

npm vue.js npm-link

6
推荐指数
1
解决办法
3095
查看次数

如何取消链接本地包?npm 在 windows env 中存储链接的位置?

我使用 npm link 命令链接了一个本地开发的包。从那以后,我无法将其取消链接。

我在 Windows 10 上。

我试过了:

  1. npm 取消链接
  2. 删除
  3. 卸载
  4. 彻底清除 npm 缓存和全局存储库。

我希望现在可以从 npm 网络 repo 安装该软件包,因为我有:

"dependencies": {
   "package": "^version"
}
Run Code Online (Sandbox Code Playgroud)

在我的 package.json 文件中,但它仍在安装本地链接版本。npm 在哪里存储链接?

windows npm npm-link

5
推荐指数
1
解决办法
2531
查看次数

如何在本地开发两个 angular 模块,其中模块 A 导入模块 B

在 angularjs 中开发两个本地项目(其中一个导入另一个)时,我只需在模块 B 的文件夹中运行“npm link”,然后在主模块的文件夹中运行“npm link module-B”,每当我更改模块 BI 中的文件时会直接在我的浏览器服务模块 A 中看到它。

但是使用 angular(4) 似乎并不容易。

我使用 ng-packagr 生成一个 dist 文件夹。
我在 dist 文件夹中运行 npm link 。
我在主模块的文件夹中运行 npm link module-B 。
然后我运行 ng serve --preserve-symlinks。

到目前为止一切顺利,它可以理解模块 B 的组件。但是如果我尝试更改模块 B 中的某些内容,重新运行 ng-packagr,我的主模块的“ng serve”无法编译,我必须停止并启动 ng serve .

我认为 ng-packagr 首先删除了 dist 文件夹,这会触发 ng serve 中的重建,该重建失败并且没有注意到删除 dist 文件夹后新创建的文件。

我们是否必须使用 ng-packagr 或者是否有其他方法可以进行多项目本地开发。

更新

如果我们在 ng-packagr.js 中注释掉这一部分,它不会删除文件夹,并且浏览器会在文件更改和 ngpackagr 运行时更新:

return Promise.all([ /*rimraf_1.rimraf(p.dest),*/ rimraf_1.rimraf(p.workingDirectory) ]);

但是运行 ng-packagr 需要一些时间,具体取决于库的大小。因为它构建了整个事物,而不仅仅是被更改的文件。

node.js npm npm-link angular ng-packagr

5
推荐指数
1
解决办法
1206
查看次数

纱线链接,对链接包的更改未反映在主机应用程序中

我正在学习使用yarn link来处理一个包,并在主机应用程序中反映了更改,我要么没有得到某些东西,要么某些东西不起作用。

它全部内置于 angular5..

我有一个包含,除其他外,一个应用程序MyApp的@org/my-packagenode_modules

我需要对 my-package 进行更改,以便为我yarn link用来创建符号链接和在 MyApp 中测试包的更改提供服务。

这就是我所做的...

在我的包中,我运行了一个构建。它创建分发文件。然后我 cli 进入 dist 包并运行yarn link.. 这是成功的.. 我得到了yarn link @org/my-package在 MyApp cli 中使用的说明..

然后我转到 MyApp,然后运行yarn link @org/my-package. 这也是成功。。

但是,当我在 my-package 中进行更改并再次运行构建时,它们不会反映在 MyApp 中。

我不明白什么?

我没有错误。

@org/my-package认为是node_modules在MyApp的应该是有或没有?yarn link在 my-package 中的 dist 上不是要覆盖那个吗?

无论我搜索多少,看起来 yarn 文档都对这个主题有点了解。

yarnpkg npm-link angular5

5
推荐指数
1
解决办法
6281
查看次数

对 npm 包使用 dist 文件夹而不是 root

我创建了一个 Node.js 包,这个包的用户要引用的文件驻留在dist包内的一个文件夹中。

现在我不想使用require('my-package/dist/feature')但是require('my-package/feature').

我设置mainfiles此在package.json,但与测试包时npm link在本地,我还是要用require('my-package/dist/feature'),否则我得到的Cannot find module错误。

package.json

  "main": "dist",
  "files": ["dist"],
Run Code Online (Sandbox Code Playgroud)

node.js npm-link

5
推荐指数
1
解决办法
4180
查看次数

使用yarn link使用具有peerDependency的本地npm包时出现问题

当我尝试使用styled-components.

出于本示例的目的,我们假设我们有两个存储库,app并且core将由core消耗app

目前,core是用 TypeScript 编写并使用tsc.

为了快速迭代,我尝试使用yarn link链接coreapp.

这对于appfind core... 我面临的问题是,当编译后的 TypeScript 代码core尝试需要一个包时,比如说,它尝试在of (而不是of )styled-components中找到这个包。由于我同时拥有 peerDependency 和 devDependency ,因此可以在s中找到它,但这不是我想要发生的事情。我希望它使用.node_modulescoreappstyled-componentscorenode_modulesstyled-componentsapp

我尝试过的一种替代方法yarn link是添加coreto appvia的依赖项file:/path。这似乎按预期工作,但引入了新问题。我怎样才能让我的开发机器存在于package.json本地开发中(而不需要不断地来回切换)?另外,似乎任何更新都core需要从 中删除该包app,并在重新添加之前清除纱线的缓存。

有没有更简单的方法可以让这个场景发挥作用?我刚刚开始将 Rollup 或 Webpack 作为解决方案,但不确定这是否是正确的方向。

typescript rollupjs yarnpkg npm-link peer-dependencies

5
推荐指数
2
解决办法
9347
查看次数

如何在本地开发相互依赖的 Angular 7 库?(npm 链接问题)

我有两个角度库 NPM 包:

  • A有基本组件
  • A-BC具有组件时的组件构建一个与附加功能与整合BC

一些组件A-BCA类似导入import { MyThing } from 'A';

A-BC的 package.json 是:

"peerDependencies": {
   "A": 1.0.0,
   "BC": 4.0.0
},
"devDependencies": {
   "A": 1.0.0,
   "BC": 4.0.0
}
Run Code Online (Sandbox Code Playgroud)

我尝试的开发步骤是:

  1. npm link --only=production 在(内置版本) A
  2. npm link --only=production 在(内置版本) A-BC
  3. my-app,运行npm link A
  4. my-app,运行npm link A-BC
  5. my-app

找不到安装在任何地方my-app时编译失败。它们都作为符号链接文件夹正确地排列在彼此的旁边。我已经在启用和尝试过这个,但这没有帮助。A-BCAnode_modulespreserveSymlinkstsconfig.jsonangular.json

A可能是 的直接依赖A-BC,但是:

  • 双方 …

npm npm-link angular angular-library angular7

5
推荐指数
1
解决办法
2530
查看次数

使用 npm 链接的 Angular 10.x 库开发在热重载时不显示浏览器中的 html/css 更改

我已经使用 cli 创建了一个 Angular lib (mylib),并使用 dist 目录中的 npm link 创建了一个符号链接。

我使用 cli 创建了一个 Angular 应用程序,并使用 npm link mylib 链接了 lib。

我能够从应用程序使用 mylib 并在应用程序中使用组件、服务等。

在 lib 上运行“ng build --watch”并在应用程序上运行“ng serve”后,如果我对 lib 中的 .ts 文件进行更改并保存,lib 将重建,然后应用程序将重建和这些更改反映在应用程序中。

但是,如果我对 lib 中的 html 或 scss 文件进行更改,它将构建,然后应用程序将重新构建,但这些更改不会反映在应用程序中。“ng serve”窗口确实显示vendor.js“chunk”发生了变化,但它也显示“警告没有发出任何文件”。紧随其后。我应该补充一点,即使模板/样式是内联的(在 ts 组件文件中),它仍然不会反映这些更改。

当我使用 chrome 开发工具并查看源代码时,vendor.js更新为模板的最新更改以及组件的样式参数。

我可以显示更改的唯一方法是终止 ng serve 并再次运行它。

Windows 10、Angular 10、NPM 6.14.10、Node 14.15.4

提前致谢!

npm-link angular angular-library

5
推荐指数
1
解决办法
253
查看次数

npm 链接删除子依赖项

我正在尝试对 NPM 包进行本地开发,并在依赖于它的包中对其进行测试。我正在使用 NPM (7.5.3) 并且专门npm link用于此,但遇到依赖链问题。

子包有依赖关系,使用npm install "git+https://github.com/name/child_package". 但是当我使用npm link那个模块时:

cd child_package
npm link
cd ../parent_package
npm link child_package
Run Code Online (Sandbox Code Playgroud)

使用最后一个命令 run ( npm link child_package),将删除child_packagenode_modules 中的所有依赖项parent_package。NPM 报告:

移除60个包,更改1个包,1秒审核231个包

此时,由于缺少 deps,父包中的所有编译都失败了。它找到了 child_package,它按预期进行了符号链接,但现在已删除“gsap”的 child_package 中定义的依赖项。

如果我使用npm install "git+https://github.com/name/child_package"它重新安装它会将 deps 添加回父项目的 node_modules 文件夹。

node.js npm npm-link

5
推荐指数
1
解决办法
145
查看次数

NestJS - Nest 无法解析依赖项 - 使用 npm/yarn 链接时

我在尝试通过 npm link 命令在我的应用程序中使用多个包时遇到了死胡同。我有一个核心项目(它生成发布到 npm 的工件)和一个使用核心库的应用程序项目。使用 npm 中的库时一切都很好。

在我本地使用 npm 链接/yarn 链接不起作用。我已经使用不同的配置玩了两天(将所有内容都放在 import/providers/export 上),但我找不到一种方法让应用程序从链接方法开始。

核心模块

    @Module({
        imports: [
            TypeOrmModule.forFeature([CountryRepository])
        ],
        providers: [
            CountryService
        ],
        exports: [
            TypeOrmModule.forFeature([CountryRepository]),
            CountryService
        ],
    })
Run Code Online (Sandbox Code Playgroud)

应用程序模块

    @Module({
        imports: [
            TypeOrmModule.forRoot({
                type: 'postgres',
                host: 'localhost',
                port: 5432,
                username: '',
                password: '',
                database: '',
                entities: [Country]
            }),
            CoreModule
        ],
        controllers: [
            CountryController,
        ],
        providers: [
            CountryService,
        ]
    })
    export class AppModule {
    }

Run Code Online (Sandbox Code Playgroud)

这是应用程序通过创建的链接启动时出现的错误

[Nest] 12072  - 02/25/2022, 11:30:10 PM   ERROR [ExceptionHandler] Nest can't resolve dependencies of …
Run Code Online (Sandbox Code Playgroud)

npm-link typeorm nestjs

4
推荐指数
1
解决办法
1714
查看次数