我正在开发一个由后端+前端组成的 Angular 7+ 项目。现在我接到一个要求,我需要创建一个由前端+后端组成的项目。但是存在一些可重用的前端代码,可以在两个应用程序中重用。
我的项目结构
要求
所以当我阅读有关图书馆概念时我可以找到
1)创建两个前端应用程序并共享一个公共库
我无法采用这种方法,因为我正在使用通过 Visual Studio 创建的 ASP.NET 角度模板项目(如Here所示)。这两个应用程序(项目一和项目二)都有自己的 FE+BE。因此,我无法将两个 FE 应用程序分组在同一文件夹中并让它们使用共享库。
2)创建库并上传到npm并用作依赖项
我不能采用这种方法,因为代码是专有的,不能在网络外共享。此外,也没有本地企业 npm 注册表来使用企业 npm。
我知道这可以使用图书馆概念来完成。但我不明白如何跨多个应用程序完成此操作。有人可以帮忙解决这个问题吗?谢谢!
考虑到您在OP中提到的目录场景,您可以通过本地路径添加库,如NPM文档中所述:本地路径:
- Root
|
-- Project One
|
-- Project Two
|
-- Library usued across both projects
例如在
Project One的
package.json
中,您可以将库添加为依赖项:
"dependencies" : {
"my-shared-library" : "file:../Library usued across both projects",
}
附注我不确定库文件夹名称中是否允许使用空格,但您可以尝试找出答案。但我假设你无论如何都不会使用空格。
替代解决方案和进一步计划
- 创建库并上传到 npm 并用作依赖项 我不能采用这种方法,因为代码是专有的,不能在网络外共享。此外,也没有本地企业 npm 注册表来使用企业 npm。
这并不完全准确。您确实可以将此方法作为替代解决方案,或者如果您认为将来可以在另一个项目中使用此库。有一种方法可以做到这一点,如 NPM 文档中所述:Git URL 作为依赖项。
package.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://[email protected]/my-shared-library.git",
}
这样您甚至可以使用不同版本的库。假设您为
4.2.0
开发了库的新版本(即 Project One
),但尚未准备好或不应该被 Project Two
使用,在 package.json
的 Project One
中,您可以像这样添加它:
"dependencies" : {
"my-shared-library" : "git+ssh://[email protected]/my-shared-library.git#branch-v4.2.0",
}
branch-for-my-shared-library
(假设 Project One 和 Project Two 都推送到同一个存储库):"dependencies" : {
"my-shared-library" : "git+ssh://[email protected]/my-current-project.git#branch-for-my-shared-library",
}
另请注意,您可以在 URL 中指定多种协议,如文档中所述:
协议是 git、git+ssh、git+http、git+https 或 git+file 之一。
进一步说明:
快乐编码。
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
您可以使用npm链接。
包文件夹中的 npm 链接将在全局文件夹 {prefix}/lib/node_modules/ 中创建一个符号链接,该符号链接链接到执行 npm link 命令的包。
简而言之,如果您进入库文件夹并输入:
就足够了npm link
然后您可以移动到要使用该库的项目中并输入:
npm link <project-name>
其中
<project-name>
是 package.json
文件中存在的名称。
这就足够了。如果您想在网络中共享库而不复制和粘贴源代码,那么,也许最好要求您的公司支付私人存储库的费用:)
Angular 文档对此进行了描述:using-your-own-library-in-applications