Building front-end private NPM notes

As the front-end team grows, the sharing of code between projects becomes particularly important. Commonly used frameworks/libraries do not need to put a share in each project, and the public modules that are produced within the team also need to have a reasonable sharing mechanism. Managing front-end code with NPM is now an industry trend. The landlord tries to use the private npm+ resource management system to build up a set of front-end resource warehouses, which are used to host common code within the company and provide source code for the development environment. This article records the construction process, perhaps can give you a reference.

Overall architecture

Building a private NPM is actually very simple, and on GitHub there is a project called Sinopia (Https://github.com/rlidwka/sinopia), which is fairly simple to use and requires no database configuration. Ali's cnpm can also be used to build private NPM, but the configuration is slightly more troublesome. Given the beta phase, I started with a simple sinopia. NPM has two functions: 1. Managed public code; 2. Provide a source of code for the development environment. That is, in the development environment, only NPM install, the corresponding code is downloaded to the project. Of course we should configure ignore so that the Node_modules folder is not submitted to the code base. The resources on the line are all on the CDN.

Private NPM alone is not enough, given that the company is constantly having new front-end onboarding and some are novice, it is necessary to provide detailed instructions for each module. Includes not limited to basic information, use method, online demo, CDN address and so on. Using the Readme.md file can describe a lot of information, but it's just a static file, and our system needs to have the ability to publish to NPM and sync to CDN. It may also be possible to expand functionality later, such as supporting front-end engineering. Therefore, a resource management system is also needed, which is used to maintain various information about public resources.

So, considering this, our front-end repository should contain two parts: the resource management system, the private NPM. The respective functions are as follows:

Maintenance of the Resource warehouse

Maintenance is the process of inputting source code into a resource management system, releasing it to NPM, and synchronizing to a CDN. The directory structure of the module is organized according to NPM specifications, but it is not exactly the same, as some are not needed. Modules are packaged in UMD format so that both the loader and the direct write <script> tags are available. The specific format is as follows:

1. Naming the root directory with the name of the module

2. Different versions of the module, creating a different directory, such as Jquery/1.8.3/src/jquery.js,jquery/2.1.0/src/jquery.js

3. SRC directory, for placing uncompressed source code

4. Dist directory, for placing compressed code

5. Use the specifications of the Package.json file to describe this module

That's enough, the system provides a publishing feature, the uploaded files are automatically posted to our NPM, and synced to the CDN. For other information such as how to use the module, the module maintainer is required to enter the system manually. In this way, private NPM has no coupling with this resource management system and will do well in the future. The process is as follows:

For CDN Synchronization, we only synchronize files in the Dist directory, because only the compressed version is needed on the line. As for the packaging of modules, not within the scope of the system's responsibilities, the project within the construction process to complete.

How to use

For users, the front-end colleagues, there are a few things to do:

1. Configuration of the project PACKAGE.JSON,NPM install the required modules

2. Get the CDN address of each module from the resource management system

3. Configure the address of each module in the project, the development environment requests the file under the local node_modules, the online environment requests CDN.

4. Use gulp for related builds, publish to test environment/online environment

Before NPM install, we need to point the warehouse address to our private NPM, not the official NPM address. Use the NPM set resigtry command. If you are in trouble, or need to change your address frequently, there is a handy registry management tool on GitHub, NRM (HTTPS://GITHUB.COM/PANA/NRM), recommended for use.

The 3rd step needs to do a description, because we now have a lot of items, the contents of the directory structure is not consistent, and some of the front and rear end has not been separated, so can not be done with the same set of programs to solve all projects. The method of configuration depends on the situation of the project, can rely on the backend to dynamically assign values to the Require.config, or can be compiled with gulp, in short, can achieve in different environments request different paths on the line.

Technical details

Sinopia, follow the documentation to install the line. Since we are installed on the server, there are two point configurations to note:

1. Node_modules/sinopia/conf under Default.yaml, listen:-0.0.0.0:4873, allowing other machines to access the port

2. In Sinopia's storage directory, there is a config.yaml, which puts the proxy:npmjs out. We may maintain only a few specific versions within our company, so there is no need to synchronize with the official warehouses.

Sinopia has a mechanism that when you install a module from a private NPM, if it does not exist, it is pulled from the NPM official repository, which is the address of the proxy configuration. We can't go to the official warehouse to pull it off, and that's what I need. On the one hand through an agent to visit NPM there is a risk of instability, on the other hand, I need users always know what the module is installed in which warehouse.

As for the development of the resource management system, the backend uses the Nodejs, EXPRESS,MONGODB database, the front-end using the MVVM framework, and a UI framework called semantic. Basic is the deletion of resources to change the operation, the basic is no difficulty. The resources contain the following fields:

Among them, categories are temporarily divided into three categories:

1. Framework/Class Library. A mature framework/class library that basically does not modify its code, such as jquery, Requirejs

2. Third-party components. UI components and functional components from third parties, not as stable and long-term maintenance as frameworks, such as: datepicker, Bullet Box plugin

3. Self-research module. Within the company's own written modules, general business modules, functional modules

About publishing NPM. Upload the source zip file in the system, unzip it first, then use the Nodejs child_process module to execute the NPM install command, the code snippet is as follows:

var exec = require (' child_process '). Exec;exec (function  (Error, stdout, stderr) {     ifnull) {        console.log (' exec error: ' + error);         false , Message:error});    }     true , message: {Name:filepath}});

As for the synchronization of the CDN, please go to the help of our students, I just upload the file to the relevant directory, the following operation by him to engage ~.

At this point, our front-end resource warehouse is built up, the server using PM2 to manage, the Sinopia and resource management system server.js up on it.

Summarize

The construction of this project is not very difficult, but because it is time to get busy, back and forth spent two months. It is mainly spent on the design of the system. Currently is a beta version, will update the content, first run to let colleagues taste, estimated there will be a lot of suggestions and problems, and then do upgrade. Friends have any suggestions, can also give me a message, not very grateful. Finally, let's get a tan:

Note: The public number of this blog post is only authorized to the front-end morning reading class, other public numbers may not be forwarded, or will be subject to infringement complaints.

Building front-end private NPM notes