How to test the network main broadcast? Do you have to pay a certificate now?

In a broad sense, online broadcasting and continuing the advantages of the Internet, using video-in-way online live broadcast, you can release product display, related conference, background introduction, program evaluation, online investigation, dialogue interview, online training, etc. On the Internet, use the Internet’s intuitive, fast, expressive form, rich in content, strong interaction, regional unrestricted, audience can be divided, and can strengthen the promotion effect of the event site.

After the live broadcast is completed, you can continue to replay, on-demand, and effectively extend the live broadcast of time and space, and play the greatest value of live content. From a narrow angle, the webcast is an emerging high interactive video entertainment. This live broadcast is usually an anchor through the video recording tool, on the Internet live broadcast platform, live you sing, play games, etc., and the audience can interact with the anchor can also be rewarded through a virtual prop.

With the continuous improvement of smartphone hardware, mobile devices such as mobile phones have gradually become the most frequently used hardware in everyday use. The user experience is also getting better and better makes netizens have a more obvious improvement. The number of severe users is also increased. In 2016, a large number of PC-side users basically have changed their original mobile capital network video. manner.

Frequent exposure is a hot spot for capital chasing .. Online broadcast gave a colored egg in foreign broadcast industries, one side is the global mobile live nasal ancestor Meerkai closed live broadcast business, one party faces domestic live startup companies

Higher finance. With the support of the capital market, the online video live broadcast market has also begun to burn the market and has reached the purpose of rapid occupation of the market. Among them, the investment in the content is more invested by each house, especially the high-quality anchor with the amount of fans will be the focus of the game live industry in the next two years.

Vite’s project, the method of packaging npmjs.com using Rollup package

Build a production version – library mode
Https://cn.vitejs.dev/guide/build.html#ludibrary-mode

Detailed setting
Https://cn.vitejs.dev/config/#build-lib

Vue-cli comes with WebPack’s packaging method, the played bag is a bit big, and Vite comes with Rollup packaging, this way is very small, there are some instructions for the official website, so after learning, It is very convenient.

Vite’s library project can be divided into two categories: (I am divided into it)

  • One is a pure JS project without html;
  • One is a project that can bring HTML (template), such as a UI library.

The following introduces the preparation and packaging methods, in fact, in fact.

Use Vite to build a project, here is a simple example:

// main.js

The code is relatively simple, just a demo.

If you want to pack, you can only have an export file, so the interior code structure is set.

Pure JS is good, the export output is good, then what should I do with template? In fact, it is also the same.

Create a project with Vite to create a test file:

// t-text.vue

  • Template section:
  • Code part

This is a library based on the UI library, using two third-party plug-ins:

  • One is Element-Plus, which is loaded on demand;
  • One is the NF-UI-Controller library they do.

Then we set an entry file main.js

If there are many components, we must consider the structure, here is just an example.

After the code is written, you need to set up vite.config.js

  • Entry: Specifies the entry file to be packaged.
  • Name: Name of the package
  • FileName: The name of the package file, the default is UMD and ES two files.
  • SourceMap: Do you generate .map files, default is not generated, if you need it, you need to set it to true.
  • RollupOptions: If the project references a third-party plugin, you need to set it here. If you don’t set it, the source code of the third-party plugin will be packaged, so that the package file is getting bigger. The third party’s plug-in will exist alone.

Vite will pack it according to the settings here, and pack them into two modes:

  • UMD: After packaging, the code is very compact, small size, but it is not easy to read;
  • ES: The packaged code and the code we wrote are very like, easy to read, but the volume is large.

If the project uses a third-party plugin, you need to do settings in External:

After setting, the code of the third party plug-in will be referenced in the way in import.
If you don’t set it, you will use the code that is used in the third party plugin, and take it out as the internal code to be packaged together, so the volume of the package becomes bigger.

Setting package.json is mainly published as a description of the resource package, you need to set the properties according to NPM requirements:

If you do not want to install a third-party plug-in when installing the resource package, you need to remove DependenCies and DevDependenCIs, otherwise the third-party plug-in that is automatically installed.

After setting up, we can pack it with Yarn Build.

The packaged file is this style:

  • NF-TOOL-ES.JS
  • NF-TOOL-UMD.JS

Brief introduction to the steps:

  • First to npmjs.com website registration account;
  • To register an email to activate the account;
  • Open the terminal and log in with npm login;
  • Published using NPM Publish;

The space is limited, and the details will not be introduced.

I like to use Yarn to install resource packages because the speed is faster.

Package.json Set the name of the installation is the name of the installation, so you have a good name and you can’t repeat with the existing name.

Will there be such a need?
When writing, the library project needs a development environment, while writing code, while running.
After writing, you need to pack it by library project.
Then there is a test environment, or demonstrate the environment?

If you build a project write test and demonstration, then it is a bit trouble, if you can get more in a project.
At this time, you need to set different Vite.config.js.

The way to use the comment before the change is more troublesome. Now found that Vite provides "Mode" way, allowing us to do different settings in Vite.config.js.

According to the official website, we can build multiple .env. * Files to store different "modes":

.ENV: Development environment (default)

.env.project: Test, demo

.env.lib: library package

After setting it, we will modify vite.config.js

In Vite.config.js, first define different defineconfig spare, then use the loadenv read mode value, return the corresponding defineconfig according to the mode.

Note: You need to set a folder of different outputs, otherwise it will be overwritten.

Set the executed command, add the desired mode.

This allows you to completely separate different environments. If there are other needs, you can also add more modes.

Changeable package command

In this way, all of them do not interfere, nor do you have any writes.

After the project package is released to npmjs.com, you can use https://unpkg.com/xxx to access, XXX indicates the name of the resource package, such as:

Wait