ਜਦੋਂ ਤੁਸੀਂ npm command ਚਲਾਉਂਦੇ ਹੋ ਤਾਂ ਕੀ ਹੁੰਦਾ ਹੈ?
ਤੁਸੀਂ ਇੱਕ npm command 'ਤੇ Enter ਦਬਾਉਂਦੇ ਹੋ ਅਤੇ ਉਡੀਕ ਕਰਦੇ ਹੋ। ਅਚਾਨਕ, ਤੁਹਾਡਾ ਪ੍ਰੋਜੈਕਟ ਕੰਮ ਕਰਨ ਲੱਗ ਪੈਂਦਾ ਹੈ। ਇਹ ਜਾਦੂ ਵਾਂਗ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ।
ਇਹ ਜਾਦੂ ਨਹੀਂ ਹੈ। ਇਹ network requests, code parsing, ਅਤੇ file optimizations ਦੀ ਇੱਕ ਲੜੀ ਹੈ।
ਅੰਨ੍ਹੇਵਾਹ commands ਚਲਾਉਣਾ ਬੰਦ ਕਰੋ। ਇਹਨਾਂ 6 ਮੁੱਖ commands ਦੇ ਪਿੱਛੇ ਕੰਮ ਕਰਨ ਵਾਲੇ ਇੰਜਣ ਨੂੰ ਸਮਝੋ।
npm install ਇਹ command ਤੁਹਾਡੀ package.json ਨੂੰ ਪੜ੍ਹਦੀ ਹੈ। ਇਹ ਤੁਹਾਡੀਆਂ dependencies ਲੱਭਣ ਲਈ ਇੱਕ cloud registry ਨਾਲ ਸੰਪਰਕ ਕਰਦੀ ਹੈ। • ਇਹ packages ਨੂੰ node_modules ਫੋਲਡਰ ਵਿੱਚ ਡਾਊਨਲੋਡ ਕਰਦੀ ਹੈ। • ਇਹ version conflicts ਨੂੰ ਹੱਲ ਕਰਦੀ ਹੈ। • ਇਹ ਸਹੀ versions ਨੂੰ ਰਿਕਾਰਡ ਕਰਨ ਲਈ ਇੱਕ package-lock.json ਬਣਾਉਂਦੀ ਹੈ।
npm run format:check ਇਹ ਇੱਕ ਵੈਰੀਫਿਕੇਸ਼ਨ (verification) ਪੜਾਅ ਹੈ। ਇਹ ਤੁਹਾਡੀਆਂ ਫਾਈਲਾਂ ਨੂੰ ਸਕੈਨ ਕਰਨ ਲਈ Prettier ਵਰਗੇ ਟੂਲਸ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। • ਇਹ ਤੁਹਾਡੇ ਕੋਡ ਦਾ ਇੱਕ virtual layout ਬਣਾਉਂਦਾ ਹੈ। • ਇਹ ਤੁਹਾਡੇ ਕੋਡ ਦੀ ਤੁਲਨਾ ਤੁਹਾਡੇ style rules ਨਾਲ ਕਰਦਾ ਹੈ। • ਇਹ ਤੁਹਾਡੀਆਂ ਫਾਈਲਾਂ ਨੂੰ ਬਦਲੇ ਬਿਨਾਂ ਗਲਤੀਆਂ (errors) ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ।
npm run format ਇਹ command ਚੈੱਕ ਦੌਰਾਨ ਮਿਲੀਆਂ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਠੀਕ ਕਰਦੀ ਹੈ। • ਇਹ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ 'ਤੇ Prettier ਚਲਾਉਂਦੀ ਹੈ। • ਇਹ ਤੁਹਾਡੇ style rules ਦੇ ਅਨੁਸਾਰ ਤੁਹਾਡੀਆਂ ਫਾਈਲਾਂ ਨੂੰ ਦੁਬਾਰਾ ਲਿਖਦੀ ਹੈ। • ਇਹ ਆਪਣੇ ਆਪ spacing ਅਤੇ formatting ਨੂੰ ਸਾਫ਼ ਕਰ ਦਿੰਦੀ ਹੈ।
npm run lint ਇਸਨੂੰ ਆਪਣੇ ਕੋਡ ਲਈ ਇੱਕ spellchecker ਵਾਂਗ ਸਮਝੋ। ESLint ਅਜਿਹੀਆਂ ਗਲਤੀਆਂ ਲਈ ਸਕੈਨ ਕਰਦਾ ਹੈ: • Syntax ਦੀਆਂ ਗਲਤੀਆਂ। • ਅਣਵਰਤੇ (unused) variables। • ਗੁੰਮ ਹੋਏ (missing) imports। • React Hook ਦੀ ਗਲਤ ਵਰਤੋਂ।
npm run build ਇਹ command ਤੁਹਾਡੀ ਐਪ ਨੂੰ ਅਸਲੀ ਦੁਨੀਆ ਲਈ ਤਿਆਰ ਕਰਦੀ ਹੈ। ਇਹ ਇੱਕ dist ਫੋਲਡਰ ਬਣਾਉਂਦੀ ਹੈ। • ਇਹ ਅਣਵਰਤੇ ਕੋਡ ਨੂੰ ਹਟਾਉਣ ਲਈ tree shaking ਕਰਦੀ ਹੈ। • ਇਹ whitespace ਨੂੰ ਹਟਾ ਕੇ ਅਤੇ variable names ਨੂੰ ਛੋਟਾ ਕਰਕੇ ਕੋਡ ਨੂੰ minify ਕਰਦੀ ਹੈ। • ਇਹ JavaScript, CSS, ਅਤੇ assets ਨੂੰ optimized ਫਾਈਲਾਂ ਵਿੱਚ ਬੰਡਲ ਕਰਦੀ ਹੈ। • ਇਹ ਫਾਈਲਾਂ ਸਰਵਰ 'ਤੇ deployment ਲਈ ਤਿਆਰ ਹਨ।
npm run dev ਇਹ ਤੁਹਾਡੇ ਕੰਮ ਕਰਨ ਲਈ ਇੱਕ local server ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ। • ਇਹ Native ES Modules ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ ਫਾਈਲਾਂ ਉਦੋਂ ਹੀ compile ਹੋਣ ਜਦੋਂ ਤੁਹਾਡਾ browser ਉਹਨਾਂ ਦੀ ਮੰਗ ਕਰੇ। • ਇਹ ਪੇਜ ਨੂੰ ਰਿਫ੍ਰੈਸ਼ ਕੀਤੇ ਬਿਨਾਂ ਤੁਹਾਡੀ ਸਾਈਟ ਨੂੰ ਤੁਰੰਤ ਅੱਪਡੇਟ ਕਰਨ ਲਈ Hot Module Replacement (HMR) ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ।
npm run preview ਇਹ ਤੁਹਾਡਾ ਆਖਰੀ ਚੈੱਕ ਹੈ। ਇਹ ਤੁਹਾਡੇ source code ਨੂੰ ਨਜ਼ਰਅੰਦਾਜ਼ ਕਰਦਾ ਹੈ ਅਤੇ ਸਿਰਫ਼ dist ਫੋਲਡਰ ਨੂੰ ਦੇਖਦਾ ਹੈ। • ਇਹ ਸਿਮੂਲੇਟ (simulate) ਕਰਦਾ ਹੈ ਕਿ ਤੁਹਾਡੀ ਐਪ ਇੱਕ ਅਸਲੀ ਸਰਵਰ 'ਤੇ ਕਿਵੇਂ ਕੰਮ ਕਰੇਗੀ। • ਇਹ production 'ਤੇ deploy ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਬੱਗ (bugs) ਫੜਨ ਵਿੱਚ ਤੁਹਾਡੀ ਮਦਦ ਕਰਦਾ ਹੈ।
Terminal ਕੋਈ black box ਨਹੀਂ ਹੈ। ਇਹਨਾਂ ਟੂਲਸ ਨੂੰ ਸਮਝਣ ਨਾਲ ਜਦੋਂ ਚੀਜ਼ਾਂ ਖਰਾਬ ਹੁੰਦੀਆਂ ਹਨ ਤਾਂ ਤੁਹਾਨੂੰ ਤੇਜ਼ੀ ਨਾਲ debug ਕਰਨ ਵਿੱਚ ਮਦਦ ਮਿਲਦੀ ਹੈ।
ਜਦੋਂ ਤੁਸੀਂ ਸਿੱਖਿਆ ਕਿ ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ, ਤਾਂ ਕਿਸ command ਨੇ ਤੁਹਾਡੇ ਕੋਡ ਕਰਨ ਦੇ ਤਰੀਕੇ ਨੂੰ ਬਦਲ ਦਿੱਤਾ? ਮੈਨੂੰ ਹੇਠਾਂ ਦੱਸੋ।