14

我正在开发一个由后端 + 前端组成的 Angular 7+ 项目。现在我有一个要求,我需要再创建一个由前端+后端组成的项目。但是存在一些可重用的前端代码,可以在两个应用程序中重用。

我的项目结构

这里

要求

这里

所以当我读到图书馆概念时,我可以找到

1)创建两个前端应用程序并共享一个公共库

我无法采用这种方法,因为我正在使用通过 Visual Studio 创建的 asp.net 角度模板项目(如图所示。两个应用程序(项目一和项目二)都有自己的 FE+BE。因此,我无法将两个 FE 应用程序分组到同一个文件夹中并让它们使用共享库。

2)创建库并上传到npm并用作依赖项

我不能采用这种方法,因为代码是专有的,不能在网络之外共享。也没有本地公司 npm 注册表来使用公司 npm。

我知道这可以使用库概念来完成。但我不明白如何在多个应用程序中做到这一点。有人可以帮助解决这个问题。谢谢 !

4

3 回答 3

6

考虑到您在 OP 中提到的目录方案,您可以通过本地路径添加库,如 NPM 文档中所述:本地路径

- Root
|
 -- Project One 
|
 -- Project Two
|
 -- Library usued across both projects

例如在package.jsonProject One中,您可以将库添加为依赖项:

"dependencies" : {
  "my-shared-library" : "file:../Library usued across both projects",
}

PS我不确定库文件夹名称中是否允许空格,但您可以尝试找出它。但我假设你无论如何都不会使用空格。


替代解决方案和进一步计划

2)创建库并上传到npm并用作依赖项我不能采用这种方法,因为代码是专有的,不能在网络外共享。也没有本地公司 npm 注册表来使用公司 npm。

这并不完全准确。您确实可以将此方法作为替代解决方案,或者如果您认为将来可以在另一个项目中使用此库。如 NPM 文档中所述,有一种方法可以做到这一点:Git URLs as Dependencies

包.json

"dependencies" : {
  "my-shared-library" : "Git repo address here. There are various ways to specify an address. See below.",
}

如何将库添加为依赖项

  • 假设您为此库创建了一个新存储库:
"dependencies" : {
  "my-shared-library" : "git+ssh://git@my-companys-treasure.com/my-shared-library.git",
}

这样您甚至可以使用不同版本的库。假设您4.2.0为您的库开发了一个新版本(即 )Project One并且尚未准备好或不应该由 使用,Project Two您可以像这样添加它:package.jsonProject One

"dependencies" : {
  "my-shared-library" : "git+ssh://git@my-companys-treasure.com/my-shared-library.git#branch-v4.2.0",
}
  • branch-for-my-shared-library或者,您可以在当前存储库中创建一个新分支,例如(假设项目一项目二都被推送到同一个存储库):
"dependencies" : {
  "my-shared-library" : "git+ssh://git@my-companys-treasure.com/my-current-project.git#branch-for-my-shared-library",
}

另请注意,您可以在 URL 中指定多种协议,如文档中所述:

协议是 git、git+ssh、git+http、git+https 或 git+file 之一。

进一步说明:

快乐编码。

于 2019-05-22T23:58:05.783 回答
3

您可以使用npm 链接

包文件夹中的 npm 链接将在全局文件夹 {prefix}/lib/node_modules/ 中创建一个符号链接,链接到执行 npm 链接命令的包。

很快,如果您进入库文件夹并输入以下内容就足够了:

npm link

然后,您可以移动到要使用该库的项目中并键入:

npm link <project-name>

<project-name>文件中存在的名称在哪里package.json

这已经足够了。如果您想在网络中共享库而不复制和粘贴源代码,那么,也许最好要求您的公司支付私人存储库的费用:)

于 2019-05-13T13:12:38.653 回答
3

1)。您可以尝试为您的库使用 npm pack:

"scripts": {
   ...
   "build_lib": "ng build --prod example-lib",
   "npm_pack": "cd dist/example-lib && npm pack",
   "package": "npm run build_lib && npm run npm_pack"
}

2) 运行 'npm pack' 后,生成的文件如下:example-lib-0.0.1.tgz

3)您可以使用以下命令从其他项目安装: npm install ../{some-paths}/example-lib/dist/example-lib/example-lib-0.0.1.tgz

在此处查看更多详细信息:https ://blog.angularindepth.com/creating-a-library-in-angular-6-part-2-6e2bc1e14121

于 2019-05-13T13:28:38.043 回答