节点js库中的静态资产

While world was burning in 2020, I was working on bigger project with strong focus on branding, with multiple customer facing applications. I decided to implement good practice approach and create common UI library to share common stuff between apps. Therefore applications can share components, functions and default options from one up-to-date npm package.

在2020年世界炙手可热的同时，我正在致力于更大的项目，重点是品牌建设，并具有面向客户的多种应用程序。 我决定实施良好实践方法，并创建通用的UI库以在应用之间共享通用的内容。 因此，应用程序可以从一个最新的npm包中共享组件，功能和默认选项。

TL;DR: How to create and setup static assets from library using Node.js and Angular

TL; DR ：如何使用Node.js和Angular从库中创建和设置静态资产

There was one (of many) thing that I spent little bit more time with. Solve challenge of sharing static assets as CSS files and images and accessing them from your application.

有一件(很多)我花了更多时间的事情。 解决了将静态资产共享为CSS文件和图像并从您的应用程序访问它们的挑战。

挑战 (The challenge)

The challenge was to setup project so it can build in prod successfully, and also setup local build so I can just develop things fast from my machine (some DELL or what).

面临的挑战是设置项目以使其能够成功构建到产品中，还设置本地构建以使我能够从我的机器(某些DELL或诸如此类)快速开发东西。

先决条件 (Prerequisites)

I wrote an article how to setup project and library - here is link.

我写了一篇文章如何设置项目和库- 这是链接 。

图书馆 (Library)

Put your static assets as CSS files, images and other stuff you need to access from your application as pictured below.

将您的静态资产作为CSS文件，图像和您需要从应用程序访问的其他内容，如下图所示。

Library project file structure

图书馆项目文件结构

That’s it? Hold on. Scripts, don’t forget building scripts. Basically just add ui-lib-dev-local script which:- builds, - create assets folder in dist folder, - copy stuff from project to freshly build local library.

而已？ 坚持，稍等。 脚本，不要忘记构建脚本。 基本上只需要添加ui-lib-dev-local脚本即可：-构建，-在dist文件夹中创建资产文件夹，-从项目复制内容以重新构建本地库。

"scripts": {
   "ng": "ng",
   "build-lib": "ng build ui-lib",
   "ui-lib-dev-local": "ng build ui-lib && mkdir dist/ui-lib/lib/assets && cp -R projects/ui-lib/src/lib/assets/ dist/ui-lib/lib/assets/"

Note: You can call this script from other project, just check prerequisites to see how.

注意 ：您可以从其他项目中调用此脚本，只需检查先决条件以了解操作方法。

应用 (Application)

Now the hard stuff.I need coffee.

现在辛苦了。我需要咖啡。

Okay, I am back.All the magic is done in angular.json file. Mostly. It means you need to modify also pipeline script (this project uses azure-pipelines.yml). And later in article I will show you how to use it (for example) in index.html file.

好的，我回来了，所有的魔术都在angular.json文件中完成了。 大多。 这意味着您还需要修改管道脚本(该项目使用azure-pipelines.yml )。 稍后在文章中，我将向您展示如何在index.html文件中使用它(例如) 。

Here is angular.json file structure, stripped down to stuff that is needed. Let’s now focus just on assets option.

这是angular.json文件结构，简化为所需的内容。 现在让我们仅关注资产选项。

First two lines says to angular, during build, where to find favicon and second where the static assets file should be found (line 11 & 12).

前两行表示在构建过程中要找到图标的角度，第二行表示应该在其中找到静态资产文件的位置(第11和12行)。

One picture for thousand words

一千张图片

Next four options are basically two and two pair. Difference is only in file path. Line 13 tells angular to copy files from locally built library project to current application project. If found, of course. But when you did not build it, and you just used npm install ui-lib ? See next.Line 18 tells angular to copy files from installed package in node_modules.Now after building project (locally) you can access them directly.

接下来的四个选项基本上是两个和两个对。 区别仅在于文件路径。 第13行告诉angular将文件从本地构建的库项目复制到当前的应用程序项目。 如果找到，当然可以。 但是，当您没有构建它，而只是使用npm install ui-lib时 ？ 第18行告诉Angular从node_modules中已安装的软件包中复制文件，现在在构建项目(本地)之后，您可以直接访问它们。

As example can be index.html that can access image and show it where it should be. Simple favicon code (yes, I know fav image can be just dropped in there in /src, this is just example):

例如index.html可以访问图像并显示图像应在的位置。 简单的图标图标代码(是的，我知道可以将fav图像放在/ src中，这只是示例)：

<link rel="icon" type="image/x-icon" href="./favicon.ico" />

And here is something more complicated:

这是更复杂的事情：

<link rel="dx-theme" data-theme="generic.app.light" href="./assets/css/generic-light.css" data-active="true">

建造 (Building)

Basically for local build you need just run the build script from library (see prerequisites part). In sake of simplicity here it is:

基本上，对于本地构建，您只需要从库中运行构建脚本(请参阅先决条件部分)。 为了简单起见，它是：

"build-ui-lib-separatedInWorkspace": "ng build ui-lib && cp -R ../ui-workspace/dist ./dist"

All is setup in angular json.file, so after build you can start using your assets. Also you can directly access them via web explorer.

所有这些都在angular json.file中设置，因此在构建之后，您就可以开始使用资产了。 您也可以通过网络浏览器直接访问它们。

Assets placement in running project

正在运行的项目中的资产放置

建立与部署 (Build & Deploy)

I am not DevOps guy, but i need to be sometimes. You know, corporate. Everybody for himself. Whatever, I can handle it. Hold my beer.

我不是DevOps家伙，但有时我需要成为。 你知道，公司。 每个人都是他自己。 无论如何，我都能应付。 拿着我的啤酒瓶子(来源于某笑话。

DevOps pipeline on azure

Azure上的DevOps管道

In azure-pipelines.yml you need to put one step between commands install and build. To be exact, you need to copy all assets to its right place. I will just tell you how.

在azure-pipelines.yml中，您需要在install和build命令之间迈出一步。 确切地说，您需要将所有资产复制到正确的位置。 我会告诉你如何。

- task: CmdLine@2
  inputs:
    script: |
      cp -r ./node_modules/ui-lib/lib/assets/* ./src/assets/
      echo '-done'
      ls ./src/assets/
      ls ./src/assets/images/
      ls ./src/assets/images/
  displayName: 'Copy static assets'

Done. Enjoy. Buy me a beer or something as thanks.

做完了 请享用。 给我买啤酒或其他东西。

专家提示 (Pro Tip)

While working on CSS files, that need to be in library, copy them to project temporary. You now don’t have to build lib and rebuild app every time when change is introduced. This will make development even more painless.

在处理CSS文件时(该文件必须位于库中)，将其复制到项目临时文件中。 现在，引入更改后，您不必每次都构建lib和重新构建应用程序。 这将使发展更加轻松。

下一个 (Next)

Creating npm package from your custom ui library using Azure and Artifactory in corporate environment

在公司环境中使用Azure和Artifactory从自定义ui库中创建npm程序包

翻译自: https://medium.com/@dominik.januvka/static-assets-in-node-js-library-267218a6be25