웹 패키지입니까, 노드입니까?

최초 발표laurieontech.dev
웹팩은'곰돌이'로 불린다.그러나 이것은 대부분의 전단 항목에서 사용된다.Webpack에는 많은 내용이 있는데, 오늘 나는 전부 소개하고 싶지 않지만, 나는 확실히 어떤 방면에 대해 이야기하고 싶다.
프로젝트를 디버깅할 때 가장 중요한 정보 중 하나는 어떤 기술이 당신이 본 오류를 초래했는지 아는 것이다.그것은 당신이 더욱 효과적으로 검색할 수 있도록 도와주고, 문제를 초래할 수 있는 변화 범위를 좁힐 수 있도록 도와준다.
허점이 많은 추상 덕분에 문제가 언제 웹 패키지나 노드인지 이해했다.js는 사람들이 상상하는 것처럼 그렇게 뚜렷하지 않다.우리 얘기 좀 하자!

노드js

1년여 전에 나는 댓글을 한 편 썼다.내가 지금 이 문제를 제기하는 이유는 중요한 것은 npm가 노드에 귀속되어 있다는 것을 기억하는 것이다.
Npm은 패키지 관리자입니다.npm에서 가방을 감청합니다.설치할 의존항과 버전을 확인하기 위해 json 파일입니다.실행 npm install 의 결과는 node_modules 디렉터리에 저장됩니다.

Insert joke about the size of that directory here.

가방에 가방을 열거할 때 가방 이름이 잘못되었습니다.json, 또는 존재하지 않는 버전을 인용하려고 시도할 때, 의존항을 설치하려고 시도할 때 npm가 당신에게 큰 소리로 외칠 것입니다.그러나 이 물건들이 존재하고 npm가 설치할 수 있다면 개의치 않는다.

웹 패키지

이것이 바로 웹백의 용무의 땅이다.많은 현대 도구들이 웹 페이지 설정을 당신 곁에서 추상적으로 만들어 낸다.그러나 Webpack의 목표는 브라우저가 사용할 수 있도록 자원을 묶는 것이다.
결과적으로 의존항은 정적 자산으로 존재하고 코드는 인용할 수 있다.이전에 이런 코드를 본 적이 있습니까?

const React = require("react")

이것이 바로 일이 좀 혼란스러워진 곳이다.

과부하 요구

노드js는 CommonJS의 약정에 따라 require를 내장 함수로 포함한다.require 다른 파일에서 JavaScript를 참조할 수 있습니다.
Webpack은 CommonJS를 비롯한 다양한 사양을 지원합니다.그래서 require도 효과적인 웹 문법이다.그러나 Webpack의require는 Node의 같은 기능보다 강하다.js.이것은 enhanced-resolve 을 사용하고 절대 경로, 상대 경로, 모듈 경로를 인용할 수 있습니다.

Webpack also includes a function called require.resolve. This function takes a module name and returns a string that contains the path to the module. The difference between the two is sometimes confusing, so I wanted to include that callout here.

다양한 표준 지원

앞에서 말한 바와 같이, Webpack은 프로젝트에서 일치하는 것을 권장하지만, 다양한 문법을 사용할 수 있습니다.그중 하나가 ES6다.대체로 ES6의 경우require는 이렇다.

import React from "react"

이곳이야말로 진정으로 재미있는 곳이다.ES6와 CommonJS는 동일하지 않습니다!따라서 이 두 가지 방법은 웹팩에서 모두 효과가 있지만 생태계의 다른 곳에는 존재하지 않는다.그리고 Webpack은 여러 종류의 파일을 묶어 놓았기 때문에, 일을 원상태로 유지하기는 어려울 수도 있습니다.

노드js

노드에서 ES6 가져오기 구문이 유효하지 않습니다.js.만약 당신이 그것을 지원하고 싶다면, 당신은 실험 소프트웨어 패키지esm를 사용할 수 있습니다.
이것은 서버를 실행하는 파일이 노드를 이용한다는 것을 의미한다.js가 실행될 때 require 를 사용해야 할 수도 있습니다.

바벨

대신 많은 JavaScript 파일이 브라우저에서 실행됩니다.이러한 파일은 일반적으로 Babel로 작성됩니다.만약 네가 바베타에 익숙하지 않다면, 내가 올린 게시물은 아주 좋은 입문서이다.
Babel이 코드를 컴파일하면 모든 가져오기가 노드로 변환됩니다.jsrequire성명(비 패키지 성명).
주의해야 할 것은 바벨의 출력은 보통 웹팩을 통해 묶어야 하기 때문에 이곳은 약간 황혼지대와 비슷하다는 것이다.

디버깅

이 모든 배경이 있으면 Cannot find module 'react' 이런 오류가 어디에서 발생했는지 확인하는 것이 더욱 쉬워진다.
프로젝트에 설치되지 않은 의존항을 인용하기 때문에 나타날 수 있습니다.그것이 설치되었는지 확인하고, 정확하게 인용했는지, 입력 오류가 없는지 확인하십시오.
반대로, 이 오류를 볼 수 있습니다. Webpack이 Node가 찾으려는 위치에 파일을 묶지 않았기 때문입니다.파일 경로 좀 봐.

전문가가 아니다

나는 이런 서로 다른 문제들을 조정하는 데 상당히 오랜 시간이 걸렸고, 나는 오류 소식이 매우 큰 작용을 한다는 것을 점차 깨달았다.이렇게 많은 소프트웨어 패키지와 도구가 우리를 위해 Webpack을 포장하는데, 우리가 얻은 디버깅 정보를 가능한 한 유용하게 확보하는 것이 매우 중요하다.