My learning method is to look at 10 NPM modules every day?

This article first public account "160bdd91c94219 front end from advanced to admission ", welcome to pay attention!

Ali recently saw front-end technology experts wolf t in 17 years this "The best way to learn Node.js confused when" mentioned:

Today, my younger brother came to me and said that I was confused. I told him a secret method: to read 10 npm modules a day, and insist on 3000+ for a year. According to normal work needs, more than 200 are great.

When I first saw felt like 160bdd91c942b5 was a bit chicken soup , but it is not unreasonable to calm down and think about it. Take Vite as an example. When I looked at its code, I was impressed by the various open source modules. I came here at my fingertips and satisfactorily solved the demand. This ability must require a large amount of open source module reading.

Vite magic-string

magic-string is widely used in Vite to do some magic replacement of strings. The purpose of this library is to replace the oversized solution of AST in some scenarios where the source code is replaced with light weight.

var MagicString = require('magic-string')
var s = new MagicString('problems = 99')

// 替换 problems -> answer
s.overwrite(0, 8, 'answer')
s.toString() // 'answer = 99'

// 生成 sourcemap
var map = s.generateMap({
  source: 'source.js',
  file: 'converted.js.map',
  includeContent: true
})

Vite fast-glob

For example, use fast-glob to implement the easy-to-use Glob Import batch import syntax in Vite

Okay, now we know that there is fast-glob . Read the documentation by the way to see how it is used. Then we can use this library to provide some good things to the outside world when we write tools such as scaffolding in our work. Import APIs used in batches, which have become part of our own knowledge system.

Vite SSG

Anthony Fu , whom I have been paying more attention to recently, has just attended the VueConf conference in 2021 and brought a speech that is very useful for daily development.

He has been very active in open source recently, and a large part of his energy has been devoted to the ecological construction of Vite. The vite-ssg plug-in developed by him supports the construction of the Vite project as a static website.

SSG, the full name is Static-Site-Generators, static site generator. When built, will build your Web application in HTML format, which is very significant for SEO and performance.

He certainly did not complete such a huge workload from @vue/server-renderer The package 060bdd91c9456a itself is to build SSR applications for Vue
Born, he cleverly used this library's ability to render Vue components as HTML strings, saving a lot of work.

It is also mentioned in his blog:

The idea here is fairly simple: bundle the app entry, then for each route, dump the app using APIs from the @vue/server-renderer package. Simplified code here:

import { renderToString } from '@vue/server-renderer'

const createApp = required('dist-ssr/app.js')

await Promise.all(
  routes.map(async (route) => {
    const { app, router, head } = createApp(false)

    router.push(route)
    await router.isReady()

    const appHTML = await renderToString(app)
    const renderedHTML = renderHTML(indexHTML, appHTML)

    await fs.writeFile(`${route}.html`, renderedHTML, 'utf-8')
  })
)

The simplified idea is that after starting the application in the SSR environment, use @vue/server-renderer generate a static HTML string for each route and write it as an HTML file.

Although the code seems short, it reflects familiarity with the Vue3 ecology, more specifically, familiarity with the capabilities of each npm package released by Vue3.

Is it just the npm library?

Of course not. For example, the project we are working on recently has access to Microsoft's open source Rush . Rush is an integrated solution designed for the Monorepo project.

In the process of reading the documentation, I learned a lot about package management:

• NPM vs PNPM vs Yarn
• Phantom Dependencies
• NPM doppelgangers

When reading the Vue.js documentation, the style guide also left a deep impression on me. The practice guide summarized by the open source author over many years of code career must have a lot of essence. such as:

Component names should start with high-level (usually general description) words and end with descriptive modifiers.

When you are in a real maintenance scenario, suppose you are thinking: "I want to change the icon for the Clear function of the SearchButton".

Then when you scan this folder, you will naturally focus on the SearchButton part, then look for the suffix Clear and Run descriptive modifiers, and click into the Clear component for maintenance. In this way, the component relationship is very clear.

The hard work of these open source authors often quietly wait for you to discover the inconspicuous parts of the document.

Too busy at work?

In fact, the first reaction of many people may be: "I watch 10 of them a day. I am so busy at work, how can I be free?"

Regarding this point, Uncle Wolf also mentioned in the original text:

The 10 here is actually just an imaginary number. It depends on individual ability and determination.

But please be sure to be able to do daily diligence.

The statistics of Node.js modules on npm show that as of today, September 24, 2017, there are a total of 559,000 modules. 150 million downloads per day. With such a large-scale module, if you learn a few modules every day, your level will definitely grow very fast.

The hardest part is not to make up your mind, but to persevere! This is the most proud compliment, there is no one!

For example, some new technologies were mentioned in the VueConf conference. For example, your colleague mentioned some libraries that interest you during the chat. You can search for it, and maybe you will inadvertently someday in the future. Help you.

to sum up

If you don't accumulate silicon steps, you can't reach miles. Keep curiosity, enthusiasm, and patience. Don't be incomprehensible about anything, and of course don't be too horny about certain places.

“10 NPM modules per day” is more like an incentive. We may lose two or three days in the meantime, or even a few weeks, but we can’t lift our energy, but as long as we keep this New Year in our hearts, we look forward to one, three, and five years. We will be different in the future.

Thank you everyone

Welcome to follow ssh, front-end trends, and original interview hot articles.

Remember to add my friends after following, I will share front-end knowledge and industry information from time to time. 2021 will spend with you.