Babel 과 ES7 을 사용 하여 JavaScript 모듈 만 들 기

[편집자 의 말] 본 고 는 주로 ES7 과 Babel 을 통 해 자 바스 크 립 트 모듈 을 구축 하 는 것 을 소개 한다.문장 학 과 는 국내 ITOM 관리 플랫폼 인 원 APM 엔지니어 컴 파일 을 보 여 주 며 다음은 본문 이다.
작년 에 새로운 자 바스 크 립 트 가 발표 되 었 는데, 그것 은 매우 많은 새로운 장점 을 가지 고 있다.그 중 하 나 는 내 보 내기 모듈 을 가 져 오 는 문법 이 자 바스 크 립 트 모듈 로 정리 되 는 유일한 방법 이다.그래, 드디어 기 다 렸 다.또 다른 좋 은 일 은 모듈 전체 의존 트 리 를 정적 으로 분석 할 수 있 도록 편성 하 는 것 이다.정말 대단 합 니 다.
우리 이 문법 들 을 한 번 훑 어 봅 시다.

import v from "mod";
import * as obj from "mod";
import {x} from "mod";
import {x as v} from "mod";
import "mod";

export var v;
export default function f(){};
export default function(){};
export default 42;
export {x};
export {x as v};
export {x} from "mod";
export {x as v} from "mod";
export * from "mod";

따라서 기본적으로 모듈 ("default") 의 주요 값 을 가 져 오 거나 명시 적 으로 내 보 내기 (explicit exports) 에서 온 특정한 속성 이나 이 두 사람의 조합 또는 모든 것 을 가 져 올 수 있 습 니 다.이에 대응 하여 기본 모듈 에 값 을 내 보 내 거나 여러 속성 을 가 진 대상 도 내 보 낼 수 있 습 니 다.너 도 이 속성 들 을 하나씩 내 보 낼 수 있다.베 스 트 스타일 은 스타일 매 뉴 얼 을 참고 하 세 요.)
ES7 에는 이런 문법 에 대한 작은 보충 도 추가 됐다.

export * as ns from "mod";
export v from "mod";

특별한 것 은 없 지만, 우 리 는 언제 그것들 을 사용 할 수 있 습 니까?날 을 택 하 는 것 보다 날 을 택 하 는 것 이 낫다.많은 ES6 의 문법 적 특성 을 다 루 듯 이 현재 지원 하지 않 으 려 면 바벨 이라는 도구 로 ES5 로 번역 할 수 있다.일단 그들 을 지지 할 준비 가 되 어 있 으 면 바벨 이 번역 을 멈 추 게 할 수 있다.
구체 적 으로 어떻게 조작 하 는 지 살 펴 봅 시다.우 리 는 Node. js 와 NPM 에서 그것 을 실현 할 것 이다.이 파일 을 실행 해 보기;
src/letter_keys.js

// you would have a constant for each key
// (I would normally uppercase all constants)
const a = 119;
const d = 100;
const s = 115;
const w = 119;

// you would export all keys here
// note: you can't say `w: 119` here. It just isn't valid.
// This destructures to `w: w, a: a, ...`
export {
  w,
  a,
  d,
  s,
}

src/arrow_keys.js

const UP = 38;
const RIGHT = 39;
const DOWN = 40;
const LEFT = 37;

export {
  UP,
  RIGHT,
  DOWN,
  LEFT,
}

src/move.js

export {a, w, s, d} from './letter_keys';
export * as ARROWS from './arrow_keys';

index. js 메 인 파일 은 내부 모듈 내용 내 보 내기 에 사 용 됩 니 다. 이 키 들 이 다른 파일 에서 내 보 냈 다 고 가정 합 니 다.이 예 는 좀 이해 하기 어렵 지만, 이것 은 결코 큰 문제 가 없다.
src/index.js

import * as keys from './move';
console.log(keys);

이것 은 이 모듈 에 의존 하 는 어떤 항목 의 일부분 이 될 수 있다.awsd 키 와 화살표 대상 을 인쇄 해 야 합 니 다.npm 부터 시작 합 시다.repo dir 를 만 들 고 초기 화 합 니 다:

~$ mkdir foo
~$ cd foo
~/foo$ mkdir src
# put src files above in ~/foo/src
~/foo$ npm init -yes
~/foo$ npm install babel-cli babel-preset-es2015 babel-preset-stage-1 -D

시간 이 좀 걸 려 요.명령 행 에서 Babel (6) 을 실행 하 는 것 을 지원 하고 babel-cli 가방 은 관련 ES7 모듈 번역 도 구 를 제공 합 니 다 (본문 을 작성 할 때).babel-preset-stage-1 표 시 는 npm 에 기본 -yes 을 만 들 고 사용자 에 게 묻 지 않 습 니 다.package.json 표 시 는 -D 의 줄 임 말로 --save-dev 에 가방 을 package.json 항목 에 추가 합 니 다.현재 기본 babel 프로필 에 미리 설 정 된 파 라 메 터 를 추가 합 니 다:
.babelrc

{
  "presets": ["es2015", "stage-1"]
}

만약 이것 이 순조롭게 운행 할 수 있다 면, 다행이다. 미래 를 안 아 라!그러나 필자 가 본문 을 쓸 때 이런 예 들 은 ES6 에서 실행 할 수 없고 Node. js 는 말 할 필요 도 없다.이런 번역 절 차 를 거 쳐 어쨌든 그것들 은 실 행 될 수 있다.
현재 우리 가 추가 한 세 개의 dev 의존 도 를 포함 하 는 거의 비어 있 는 package. json 파일 이 있어 야 합 니 다.이 package. json 파일 에 스 크 립 트 를 추가 하여 번역 을 실현 합 니 다.

  ...
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "translate": "node_modules/babel-cli/bin/babel-node.js src/index.js"
  },
  ...

("test" 줄 뒤에 만 "translate" 줄 과 쉼표 를 추가 합 니 다.
이 번역 스 크 립 트 는 컴 파일 절차 이다.글 의 끝 부분 에서 본문 (정식 버 전) 에서 사용 하 는 최종 패키지 제 이 슨 파일 을 찾 을 수 있 습 니 다.이제 npm 명령 을 호출 하여 스 크 립 트 를 실행 하여 번역 을 실현 하고 코드 를 실행 하 는 것 만 남 았 습 니 다.

~/foo$ npm run translate --silent

{ A: [Getter],
  W: [Getter],
  S: [Getter],
  D: [Getter],
  ARROWS: { UP: 38, RIGHT: 39, DOWN: 40, LEFT: 37 } }

화 이 팅!이제 추가 보상 으로 코드 를 헷 갈 리 게 하기 위해 Jscrambler 를 사용 할 수 있 습 니 다.우 리 는 바벨 이 번역 한 코드 를 전달 할 수 있 기 때문에 왜 이렇게 하지 않 습 니까?
우리 (최종) package. json 파일 은 다음 과 같 습 니 다.
package.json

{
  "name": "foo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "translate": "node_modules/babel-cli/bin/babel-node.js src/index.js"
  },
  "keywords": [],
  "author": "Your Name  (http://localhost/)",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "6.6.5",
    "babel-preset-es2015": "6.6.0",
    "babel-preset-stage-1": "6.5.0",
    "jscrambler": "0.7.5"
  }
}

여느 때 처럼 설정 을 완료 합 니 다.다음은 필자 가 사용 한 파일 입 니 다. (이 파일 이 어떻게 만 들 어 졌 는 지 깊이 알 고 싶 습 니 다. 이 를 예 로 들 어 NPM 에 관 한 문 서 를 더 얻 을 수 있 습 니 다)
.jscramblerrc

{
  "keys": {
    "accessKey": "See https://jscrambler.com/en/account/api_access",
    "secretKey": "See https://jscrambler.com/en/account/api_access"
  },
  "params": {
    "constant_folding": "%DEFAULT%",
    "dead_code": "%DEFAULT%",
    "dead_code_elimination": "%DEFAULT%",
    "dictionary_compression": "%DEFAULT%",
    "dot_notation_elimination": "%DEFAULT%",
    "function_outlining": "%DEFAULT%",
    "function-reorder": "%DEFAULT%",
    "literal_duplicates": "%DEFAULT%",
    "literal_hooking": "2;8",
    "member_enumeration": "%DEFAULT%",
    "mode": "nodejs",
    "rename_local": "%DEFAULT%",
    "string_splitting":"0.3",
    "whitespace": "%DEFAULT%"
  }
}

우 리 는 대본 한 토막 으로 모 았 다.이 스 크 립 트 는 Babel 로 원본 파일 을 번역 하여 / build 폴 더 로 출력 한 다음 Jscrambler 로 코드 를 혼동 한 다음 결 과 를 / dist 폴 더 에 넣 습 니 다. /dist 의 내용 은 ES7 의 어떠한 특성 도 사용 하지 않 고 정상적으로 실 행 될 수 있 습 니 다.
run.sh

#!/bin/sh

echo "Babelifying src/*.js"
node_modules/babel-cli/bin/babel.js -d build src/*.js
echo "Scrambling build/*.js"
node_modules/jscrambler/bin/jscrambler -o dist build/src/**
echo "Clean up artifacts"
mv dist/build/src/* dist/
rmdir dist/build/src
rmdir dist/build
echo "Done! See dist/scrambled.js"
echo "Running:"
node dist/index.js

준비 완료:

chmod +x run.sh

다음, 실행:

~/foo$ ./run.sh 
Babelifying src/*.js
src/arrow_keys.js -> build/src/arrow_keys.js
src/index.js -> build/src/index.js
src/letter_keys.js -> build/src/letter_keys.js
src/move.js -> build/src/move.js
Scrambling build/*.js
Clean up artifacts
Done! See dist/ for your scrambled files
Running:
{ a: [Getter],
  w: [Getter],
  s: [Getter],
  d: [Getter],
  ARROWS: { UP: 38, RIGHT: 39, DOWN: 40, LEFT: 37 } }

/ dist 폴 더 에 가서 결 과 를 볼 수 있 습 니 다.결 과 는 원본 파일 과 는 거리 가 멀다. 이것 은 우리 가 Jscrambler 를 통 해 그것 을 보호 하지만 결 과 는 실행 할 수 있 기 때문이다.
튜 토리 얼 은 여기 서 마 치 겠 습 니 다. ES7 잘 쓰 세 요!
OneAPM 은 Node. js 응용 성능 병목 을 쉽게 잠 그 고 강력 한 Trace 기록 을 통 해 줄 급 문제 코드 를 잠 글 때 까지 분석 할 수 있 습 니 다.사용자 각도 에서 시스템 응답 속 도 를 보 여주 고 지역 과 브 라 우 저 차원 에서 사용자 의 사용 상황 을 통계 합 니 다.더 많은 기술 글 을 읽 으 려 면 OneAPM 공식 블 로 그 를 방문 하 세 요.
본 고 는 OneAPM 공식 블 로그 에서 이전 되 었 다.
원본 주소:https://blog.jscrambler.com/creating-modules-javascript-es7-babel/