ES6, NodeJS 및 eslint 계속 사용하기(Babel 없음!)

소개

그래서 Node-Express-Mongo 서버 샘플을 만들어서 그 비결을 알아보고 있습니다. Node는 현재 기본적으로 es6 모듈을 지원하고 있습니다!:)
이 글은 이러한 프로젝트를 만드는 과정을 소개할 것입니다. 이것은 es6 지원, eslint 설정과 몇 가지 기교를 포함합니다. P

주:

This tutorial involves setting the --es-module-specifier-resolution=node\" flag in the command line of node, which is an experimental flag. This is the 'hack' mentioned above. This is done in order to omit the '.js' file extension while importing modules. However, if you are uncomfortable with experimental tags, you could either use '.js' extensions everywhere in the code or use Babel.

ES6？

es6 모듈을 지원하면 다음과 같은 작업을 수행할 수 있습니다.

import Stuff, {some, other, stuff} from 'some/library';
export thing;
export default anotherThing;

이것은 require()과 IMO의 단조성을 깨뜨렸고 이것은 더욱 간결한 문법이다.일찍이 네가 이렇게 하고 싶다면, 너는 반드시

은 TS를 사용합니다(이것은 좋은 일일 수도 있지만 실행하기 전에 추가된'구축'단계를 추가했습니다. 비록 이런 모델은 전단 개발에 사용할 수 있지만 저에게는 완전히 비장의 카드입니다.)

은 Babel 라이브러리를 사용하여 es6 코드를 같은 효과의commonJS 코드로 전송합니다.

Note that although these statements are supported, currently they map to their require() and module.exports equivalents in node, so doing essentially the same thing as Babel, but with no extra dependencies.
Also, using import and export is the correct way forward, because at some point of time in future, node is going to adopt this way of using modules and not completely relying on require().

Also, did I mention that using import and exports is faster than require() ? :)

이제 코드를 시작합시다.

프로젝트 설정

메모

This tutorial will guide you in making a simple, barebones node app with es6 support. I will not be including any other stuff like express, extra dependencies etc. for the sake of simplicity.

기본 패키지를 가져오려면 npm init을 실행하십시오.json:

{
  "name": "es6-api",
  "version": "1.0.0",
  "description": "es6-api",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "es6",
    "api"
  ],
  "author": "",
  "license": "ISC"
}

이제 package.json에 몇 가지 내용을 추가해야 합니다.

ES6 모듈에 대한 지원을 추가하려면 회선 "type": "module"을 package.json에 추가합니다.

"dev" 속성에 "scripts" 스크립트를 추가합니다. 예: "dev":"node --es-module-specifier-resolution=node src/index.js"

은 "main": "index.js",을 "main": "src/index.js",으로 변경하여 폴더 src를 만들고 그 중의 파일 index.js을 터치합니다.

현재 package.json은 다음과 같습니다.

루트 디렉터리 (package.json이 저장된 곳) 에서 npm install eslint && npx eslint --init을 실행하여 eslint를 설정합니다.
당신의 선택에 따라 모든 질문에 대답하세요.설정 옵션 "항목에 어떤 종류의 모듈을 사용합니까?"esm에 도달합니다.이것은 나의 선택이지만, 너의 선택은 다를 수 있다.

루트 디렉터리에 .eslintrc.json을 기록하고 node_modules 디렉터리에 eslint의 로컬 복사본을 설치합니다..eslintrc.json을 열면 유사한 구성을 볼 수 있습니다.

현재, 우리는 eslint가 우리의esm 설정과 함께 작동하도록 약간의 변경을 해야 한다.
우선 "es6": true에 "env"porperty 값을 추가합니다.그런 다음 "globals"이라는 새 속성을 만들고 그 값에 다음 줄을 추가합니다. "__dirname": true.이 점은 우리가 잠시 후의 코드에서 토론할 것이다.
구성은 다음과 같이 해야 합니다.

현재 eslint가 설정되어 있습니다. src/index.js 파일을 계속 편집할 수 있습니다.다음 코드를 추가합니다.

// src/index.js

import path from 'path';

global.__dirname = path.resolve('./');
console.log(__dirname);

이 코드는 두 가지 일을 완성합니다.

은 우리가 실제로 import문장을 사용할 수 있음을 검증한다.

은 esm가 있는 노드에서 일반적으로 전역적으로 사용할 수 있는 변수를 정의하지 않았습니다. 예를 들어 __dirname입니다.이 두 문장은 다시 전 세계에서 사용할 수 있게 한다."__dirname": true에 .eslintrc.json줄을 추가했습니다.그렇지 않으면 eslint에서 정의되지 않은\uudirname을 나타내는 오류가 발생합니다.

현재 우리의 시작 코드는 루트 디렉터리로 돌아가 npm run dev을 실행할 준비가 되어 있습니다.다음 출력을 받아야 합니다.

컨텐트 내보내기

우리 자신의 모듈을 어떻게 만들고 내용을 내보내는지 봅시다.
먼저 example 디렉터리에 src 디렉터리를 만듭니다.터치 파일 인덱스.js, 다음 코드를 추가합니다.

const value1 = 99;
const value2 = 100;

export { value2 };
export default value1;

우리는 여기서 value1을 기본 내보내기, value2을 이름 내보내기로 내보내는 모듈을 만듭니다.우리는 또한 메인 색인에서 이 값을 가져올 것이다.js.
코드 src/index.js을 (으)로 교체합니다.

import path from 'path';
import value1, { value2 } from './example';

global.__dirname = path.resolve('./');
console.log(value1, value2);

이제 프로젝트는 다음과 같습니다.
npm run dev을 실행하면 보실 수 있습니다.

> [email protected] dev /home/tushar/src/tmp/tut/es6-api
> node --es-module-specifier-resolution=node src/index.js

99 100

이것은 우리의es6모듈이babel!을 사용하지 않은 상황에서node에 성공적으로 불러왔다는 것을 증명한다.

각주

await import(...), 모듈 별명,commonJS 모듈 가져오기 등을 사용하여esm를 사용할 수 있지만 본고의 범위를 넘어섰다고 생각합니다.
또한 현재 import은 require()과 같기 때문에 기본적으로 await import('file.json')을 써서 JSON 파일에서 데이터를 불러올 수 있습니다.
이 강좌를 좋아하거나 조언이 있으면 아래에 논평을 발표해 주십시오.읽어주셔서 감사합니다.안녕히 계세요.