요약
우리가 일반적으로 사용하는 npm 타사 패키지는 일반적으로 이 두 가지 사양을 기반으로 개발됩니다. ES모듈??
CommonJS란?
- 2009년 미국 프로그래머 Ryan Dahl은 서버 측 프로그래밍에 javascript 언어를 사용하기 위해 node.js 프로젝트를 만들었습니다. 이것은 "Javascript 모듈식 프로그래밍"의 공식적인 탄생을 의미합니다. 서버 측에는 운영 체제 및 기타 애플리케이션과 상호 작용하는 모듈이 있어야 합니다.
- CommonJS는 Python, Ruby 및 Java와 유사한 표준 라이브러리를 제공하므로 개발자는 CommonJS API를 사용하여 다양한 JavaScript 인터프리터 및 다양한 호스트 환경에서 실행할 수 있는 애플리케이션을 작성할 수 있습니다.
- NodeJS, webpack 우리는 보통 CommonJS 형식으로 작성합니다.
CommonJS는 다음 프로그램을 개발할 수 있습니다.
(1), 서버측 JavaScript 애플리케이션
(2), 명령줄 도구
(3), GUI 애플리케이션
(4), 하이브리드 애플리케이션(예: Titanium 또는 Adobe AIR)
코드 형식
일반 언어로 기능은 다음과 같습니다. require 키워드를 사용하여 종속성을 도입합니다. 예를 들면 다음과 같습니다.
const path = require('path')
const AutoLoad = require('@fastify/autoload')
및 module.exports
module.exports = async function (fastify, opts) {
fastify.get('/', async function (request, reply) {
return 'this is an example'
})
}
ES 모듈이란 무엇입니까?
ES 모듈(ESM)은 모듈을 처리하기 위한 ECMAScript 표준입니다. Node.js는 오랫동안 CommonJS 표준을 사용했지만 브라우저에는 모듈 시스템이 없었습니다. 모든 주요 결정(예: 모듈 시스템)은 먼저 ECMAScript로 표준화한 다음 브라우저에서 구현해야 했습니다.
ES 모듈(ESM)은 JavaScript의 공식 표준화 모듈 시스템입니다.
ES 모듈 작동 방식
개발을 위해 모듈을 사용할 때 모듈-모듈 종속성 그래프가 생성됩니다. 서로 다른 종속성 간의 연결은 사용하는 가져오기 문에서 비롯됩니다.
차이점
- CommonJS 주문형 로딩, 동적 로딩, 조건부 로딩 및 순환 로딩
- ESM은 정적으로 로드되므로 종속성을 구문 분석하고 운영 효율성을 최적화하는 데 편리합니다. 현재 import()도 동적으로 로드할 수 있습니다.
- CommonJS 모듈 출력 값의 복사본, ESM 출력 값에 대한 참조.
- CommonJS는 런타임 시 로드되며 ESM은 컴파일 시 인터페이스를 출력합니다.
- CommonJS 모듈의 require()는 동기식으로 로드되고 ESM 가져오기는 비동기식으로 로드됩니다.독립적인 모듈 종속성 구문 분석 단계가 있습니다.
- ESM 가져오기가 승격되며 const 변수는 읽기 전용입니다.
차이 예
CommonJS에서는 다음과 같이 __dirname을 직접 사용할 수 있습니다.
fastify.register(AutoLoad, {
dir: path.join(__dirname, 'plugins'),
options: Object.assign({}, opts)
})
그러나 이는 ESM에서 더 이상 지원되지 않으므로 다음으로 변경해야 합니다.
import {dirname} from 'path';
import { fileURLToPath } from 'url';
function getDirname(url) {
const __filename = fileURLToPath(url);
return dirname(__filename);
}
해결책
해결 방법 1: ES 모듈 사양에 따라 "유형"을 지정합니다.
CommonJS 모듈 또는 ES 모듈 모듈을 사용할 특정 파일을 별도로 지정
- 정상적인 상황에서 구성하지 않으면 프로젝트는 CommonJS 사양으로 기본 설정됩니다.
- package.json 파일에서 "type": "module"을 지정하면 ES 모듈 사양을 따릅니다.
- 필수 지정 파일 접미사가 .cjs인 후 이 파일은 CommonJS 사양을 준수합니다.
ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and 'test/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
ReferenceError: 在 ES 模块范围中没有定义要求，您可以使用 import 代替
这个文件被视为 ES 模块，因为它有一个’。Js 的文件扩展名和‘ test/package.json’包含“ type”: “ module”。若要将其视为 CommonJS 脚本，请将其重命名为使用’。Cjs 的文件扩展名。
"type": "module"의 경우 이 오류를 해결하는 방법은 무엇입니까?
CommonJS 스크립트를 사용하기 위해 파일의 접미사 이름을 별도로 설정할 수 있으며 지정된 파일 접미사는 필수입니다.cjs
해결 방법 2: CommonJS 사양에 따라 구성 없이
ES 모듈을 사용해야 하는 파일의 접미사를 .mjs로 지정하면 이 파일은 ES 모듈 사양을 강제로 사용합니다.
해결 방법 3: Babel을 사용하여 CommonJS 및 ES 모듈을 완벽하게 구성하고 원하는 대로 사용(현재 업데이트된 구성 솔루션이 있으며 작업이 완료되면 솔루션 4를 작성하고 솔루션 3도 사용할 수 있음)
종속성 설치
npm install --save-dev babel-cli babel-preset-env babel-register babel-preset-stage-0
npm install --save babel-polyfill # babel转码时不能识别一些全局对象的API，例如Object.assign，使用它可以解决这个问题
- babel-polyfill babel은 코드 변환 시 일부 전역 객체 API를 인식하지 못합니다.
- babel-preset-stage-0 es 단계별 제안 구문 stage-0에는 stage1,2,3이 포함됩니다.
- 트랜스코딩을 달성하기 위해 프로그램 엔트리 파일에 도입될 수 있는 babel-register 후크
루트 디렉터리에 새 .babelrc를 만듭니다.
{
"presets": [
"env",
"stage-0"
]
}
명령 항목을 구성하고 루트 디렉터리에 새 main.js를 만듭니다.
require('babel-polyfill');
require('babel-register');
require('./app.js'); // 引入您的项目的启动文件
명령줄 구성
package.json에 추가
"scripts": {
"start": "node main.js",
},
스타트업 프로젝트
npm start
끝났습니다. 다음 프로젝트에서 어떤 유형을 작성해도 문제가 없을 것입니다.
해결 방법 4: 완료되면 계속 추가할 것입니다. 의존성을 덜 사용할 수 있는 더 좋은 방법이 있습니다.
- 오늘은 여기까지 씁니다~
- 친구들 (￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ 내일 만나요~~
- 모두 매일매일 행복하세요
기사를 수정해야 할 부분을 지적하는 모든 사람을 환영합니다 ~
배움은 끝이없고 협력은 윈윈입니다
