The first official account of this article”
Front end from advanced to admission”, welcome to pay attention!
Recently, I saw the article “The Best Way to Learn Node.js when Confused” by Ali front-end technical expert Uncle Wolf in 2017:
Today my little brother came to me and said he was confused. I told him a secret method: if I read 10 NPM modules a day, it will be 3000+ if I persist for a year. According to normal work needs, more than 200 modules will be very good.
I felt a little chicken soup when I saw it for the first time, but it makes sense to calm down and think about it carefully. Take Vite as an example. When I looked at its code, I was deeply impressed by the fact that various open source modules were readily available, which properly solved the needs.
Vite magic-string
For example, Vite makes extensive use of the magic-string library for some magic string substitutions. The purpose of the library is to replace the oversized AST solution in light source code replacement scenarios.
Var magicString = require('magic-string') var s = new MagicString('problems = 99') // Replace problems-> answer .write (0, 8, 'answer') s.string () // 'answer = 99' var map = s.enerateMap ({source: 'source.js', file: 'converted.js.map', includeContent: true })Vite fast-glob
Another example is to use fast-glob to implement the handy glob Import bulk Import syntax in Vite
Well, now that we know about the Fast-glob library, we can read the documentation to see how it works, so that we can use this library to provide some useful bulk import APIs for our own work, such as scaffolding, and it becomes part of our own knowledge base.
Vite SSG
Anthony Fu, who I’ve been following a lot lately, recently came out of the 2021 Vueconf conference with a very useful presentation for everyday development.
He has been very active in open source lately, with much of his focus on Vite-related ecological construction. He developed the Vite-SSG plugin that allows you to build a Vite-related project into a static website.
SSG, full name is static-site-generators, Static Site Generators. in
Build timeJust build your Web application in HTML format, which is a significant SEO and performance aid.
The @Vue /server-renderer package itself was built for Vue to build SSR applications, and it takes advantage of the library’s ability to render Vue components as HTML strings to save a lot of work.
Also mentioned on 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-rendererpackage. 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 to start the application in the SSR environment and generate static HTML strings for each route with @Vue/Server-Renderer and write them into HTML files.
While the code may seem brief, behind it lies a familiarity with the VUE3 ecosystem and, more specifically, with the capabilities of each NPM package that VUE3 releases.
Is it just the NPM library?
Of course not. For example, we recently worked on a project that plugged into Microsoft’s open source Rush, an all-in-one solution for the Monorepo project.
As I read the documentation, I learned a lot about package management:
- NPM vs PNPM vs Yarn
- Phantom Dependencies
- NPM doppelgangers NPM doppelgangers
When I read the vue.js documentation, the style guide section also left me with a deep impression. There must be a lot of essence in the practice guide that the open source author summed up over the years of his coding career. Such as:
The component name should begin with a higher-order (usually generically described) word and end with a descriptive modifier.
When you’re in a real maintenance situation, suppose you’re thinking, “I’m going to change the Clear icon for the SearchButton.
So when you scan the folder, your focus will naturally focus on the SearchButton section, then look for the suffixes Clear and Run descriptive modifiers, and click on the Clear component for maintenance. The component relationships are very clear at a glance.
The work of these open source authors is often hidden in the document waiting for you to discover.
Too busy at work?
Many people’s first reaction might be, “Ten a day. I’m so busy with work, how can I spare the time?”
Uncle Wolf also mentioned this in the original article:
The list of 10 is actually an imaginary number, based on your ability and determination to do what you can.
But make sure you do it daily.
The Node.js module statistics on NPM show that as of September 24, 2017, there are 559,000 modules. 150 million downloads a day. Such a large module, learn a few every day, the level will grow very fast.
The hardest part is not making up your mind, but sticking to it! This is one of the proudest compliments of all!
For example, some new technologies were mentioned in the Vueconf conference. For example, if your colleague mentioned some libraries that interest you in the chat, you can search for them, and you may inadvertently help you one day in the future work.
conclusion
No accumulation of silicon step, no thousands of miles. Be curious, enthusiastic and patient. Don’t be ignorant of everything, and certainly don’t get too involved in certain areas.
“10 NPM modules a day” is more like a kind of motivation. We may be off for two or three days, or even a few weeks, but as long as we keep this New Year in our heart, we look forward to a different person in one year, three years, five years.
Thank you for your
Welcome to SSH, front-end trends, original interview hot articles, everything.
Remember to add me as a friend after you follow me. I will share front-end knowledge and industry information from time to time. 2021 will be with you.
