Windows7에서 Node.js 설치에서 Babel CLI를 사용하여 ES6 → ES5로 변환 할 때까지
경위
최근 JavaScript (ES6)를 공부하고 싶습니다.
최근의 안건으로 클로저라든지 사용해 필사적이고 모듈화하고 있었지만,
class라든지 사용할 수 있다면 사용하고 싶다. . .
특히 자신이 Java를 백엔드로 사용하기 때문에 친근감도.
쓰기 시작한 것은 좋지만 브라우저의 대응이 ...
그러나 역시 거기는 JavaScript, 브라우저의 대응이 흔들리는 것은 옛날부터 자주 있는 것으로…
Chrome에서는 특히 아무것도 하지 않아도 움직이지만 IE가 ぁぁぁ라는 상황에 빠졌습니다.
그런 다음 유행의 웹 개발 도구도 여러 가지 시도해 봅시다.
라고, Node.js를 넣은 것은 좋지만… 여러가지 넣으려고 하면 Win7 환경이라면 에러 나와!
빨간색 노란색의 화려한 로그를 봐도 결국 원인을 별로 모르거나. . .
조사한 결과 C++ 컴파일러라든지 Python이라든지가 부족한 것 같다. (Node.js용 설정도 필요)
꽤 귀찮은 것 같다, 리눅스 환경 만들까? …라고 생각했던 곳에 windows-build-tools라는 구세주가! !
이하 그 구축 작업 비망록입니다. 덧붙여서 OS는 Windows 7 Home Premium 64bit.
1. Node.js 설치
우선은 지금부터, 아래에서 인스톨러를 가져와 넣자.
htps : // 그래서 js. 오 rg / 그럼 /
쓰기 시점의 버전은 6.11.2였습니다.
2. Git 설치
htps://기 tscm. 코m/
npm (Node.js의 패키지 관리 도구) 내부에서 패키지에 들러 git을 사용하여 가져 오거나 (?)하는 것 같기 때문에,
이쪽도 상기로부터 인스톨러를 가져와 설치.
쓰기 시점은 2.14.0이었다.
아이콘이나 .git 연결 등은 자유롭고 좋다고 생각하지만,
"Adjusting your PATH environment"에서는 "Use Git from the Windows ~"를 선택합시다.
이것을 선택하면 Windows 명령 프롬프트에서 git 명령을 실행할 수 있습니다.
나중에 기본적으로 좋다고 생각합니다.
3. windows-build-tools 설치
여기가 제일 중요하다고 생각한다.
명령 프롬프트를 시작하고 다음을 실행합시다.
두통의 C++ 컴파일러와 파이썬 설정을 해줍니다! ! !
… 거의 아래의 기사의 판매 입니다만. . .
글로벌로 설치합니다.
(npm 설치의 글로벌/로컬은 여기에서는 생략합니다)
npm install --global windows-build-tools
Windows-Build-Tools
https://github.com/felixrieseberg/windows-build-tools
Windows에서 npm install하고 node-gyp으로 넘어졌을 때 해결 방법
http://qiita.com/AkihiroTakamura/items/25ba516f8ec624e66ee7
Python은 2.x가 아니라면 안됩니다. (3.x는 들어갔다)
4. Babel CLI 설치 및 구성
여기까지 오면 또 한숨, Babel CLI의 설치와 ES5로의 변환 설정을 합시다.
Babel CLI는 babel 명령을 실행할 수 있도록 합니다.
Babel은 로컬로 설치합니다. 명령 프롬프트에서 다음을 실행합니다.
# Babel CLIのインストール
npm install --save-dev babel-cli
# ES5への変換に必要なプリセットのインストール
npm install --save-dev babel-preset-es2015
[babel-cli] babel 명령 행 실행 (es6 to es5)
http://qiita.com/a_ishidaaa/items/a0899d42ddc0545190a1
아마 3. 까지의 순서를 밟고 있으면 인스톨 할 수 있다.
여기 와서 며칠 걸렸어요. . .
5. 확인
현재 작업 디렉토리에 ES6에서 JavaScript를 작성하세요!
확인에 사용한 것은 이런 느낌입니다.
sample.jsclass Sample{
constructor(str, num){
this.str = str;
this.num = num;
}
disp(val){
alert(this.str);
alert(this.num+val);
}
}
let sample = new Sample('hello', 10);
sample.disp(100);
파일을 만든 후 명령 프롬프트로 다시.
다음 명령을 실행합니다.
babel sample.js
그러면 아래 코드가 화면에 나타날 것이라고 생각합니다.
'use strict';
--------------------------------------------
自動生成の読みづらいコードなので略
--------------------------------------------
var Sample = function () {
function Sample(str, num) {
_classCallCheck(this, Sample);
this.str = str;
this.num = num;
}
_createClass(Sample, [{
key: 'disp',
value: function disp(val) {
alert(this.str);
alert(this.num + val);
}
}]);
return Sample;
}();
var sample = new Sample('hello', 10);
sample.disp(100);
무사히 ES6→ES5 변환을 할 수 있게 되었습니다!
소감
Windows에서도 npm을 사용한 개발이 조금 쉬워졌습니까? 라고 느껴졌습니다.
끝까지 읽어 주셔서 감사합니다.
우선은 지금부터, 아래에서 인스톨러를 가져와 넣자.
htps : // 그래서 js. 오 rg / 그럼 /
쓰기 시점의 버전은 6.11.2였습니다.
2. Git 설치
htps://기 tscm. 코m/
npm (Node.js의 패키지 관리 도구) 내부에서 패키지에 들러 git을 사용하여 가져 오거나 (?)하는 것 같기 때문에,
이쪽도 상기로부터 인스톨러를 가져와 설치.
쓰기 시점은 2.14.0이었다.
아이콘이나 .git 연결 등은 자유롭고 좋다고 생각하지만,
"Adjusting your PATH environment"에서는 "Use Git from the Windows ~"를 선택합시다.
이것을 선택하면 Windows 명령 프롬프트에서 git 명령을 실행할 수 있습니다.
나중에 기본적으로 좋다고 생각합니다.
3. windows-build-tools 설치
여기가 제일 중요하다고 생각한다.
명령 프롬프트를 시작하고 다음을 실행합시다.
두통의 C++ 컴파일러와 파이썬 설정을 해줍니다! ! !
… 거의 아래의 기사의 판매 입니다만. . .
글로벌로 설치합니다.
(npm 설치의 글로벌/로컬은 여기에서는 생략합니다)
npm install --global windows-build-tools
Windows-Build-Tools
https://github.com/felixrieseberg/windows-build-tools
Windows에서 npm install하고 node-gyp으로 넘어졌을 때 해결 방법
http://qiita.com/AkihiroTakamura/items/25ba516f8ec624e66ee7
Python은 2.x가 아니라면 안됩니다. (3.x는 들어갔다)
4. Babel CLI 설치 및 구성
여기까지 오면 또 한숨, Babel CLI의 설치와 ES5로의 변환 설정을 합시다.
Babel CLI는 babel 명령을 실행할 수 있도록 합니다.
Babel은 로컬로 설치합니다. 명령 프롬프트에서 다음을 실행합니다.
# Babel CLIのインストール
npm install --save-dev babel-cli
# ES5への変換に必要なプリセットのインストール
npm install --save-dev babel-preset-es2015
[babel-cli] babel 명령 행 실행 (es6 to es5)
http://qiita.com/a_ishidaaa/items/a0899d42ddc0545190a1
아마 3. 까지의 순서를 밟고 있으면 인스톨 할 수 있다.
여기 와서 며칠 걸렸어요. . .
5. 확인
현재 작업 디렉토리에 ES6에서 JavaScript를 작성하세요!
확인에 사용한 것은 이런 느낌입니다.
sample.jsclass Sample{
constructor(str, num){
this.str = str;
this.num = num;
}
disp(val){
alert(this.str);
alert(this.num+val);
}
}
let sample = new Sample('hello', 10);
sample.disp(100);
파일을 만든 후 명령 프롬프트로 다시.
다음 명령을 실행합니다.
babel sample.js
그러면 아래 코드가 화면에 나타날 것이라고 생각합니다.
'use strict';
--------------------------------------------
自動生成の読みづらいコードなので略
--------------------------------------------
var Sample = function () {
function Sample(str, num) {
_classCallCheck(this, Sample);
this.str = str;
this.num = num;
}
_createClass(Sample, [{
key: 'disp',
value: function disp(val) {
alert(this.str);
alert(this.num + val);
}
}]);
return Sample;
}();
var sample = new Sample('hello', 10);
sample.disp(100);
무사히 ES6→ES5 변환을 할 수 있게 되었습니다!
소감
Windows에서도 npm을 사용한 개발이 조금 쉬워졌습니까? 라고 느껴졌습니다.
끝까지 읽어 주셔서 감사합니다.
여기가 제일 중요하다고 생각한다.
명령 프롬프트를 시작하고 다음을 실행합시다.
두통의 C++ 컴파일러와 파이썬 설정을 해줍니다! ! !
… 거의 아래의 기사의 판매 입니다만. . .
글로벌로 설치합니다.
(npm 설치의 글로벌/로컬은 여기에서는 생략합니다)
npm install --global windows-build-tools
Windows-Build-Tools https://github.com/felixrieseberg/windows-build-tools
Windows에서 npm install하고 node-gyp으로 넘어졌을 때 해결 방법 http://qiita.com/AkihiroTakamura/items/25ba516f8ec624e66ee7
Python은 2.x가 아니라면 안됩니다. (3.x는 들어갔다)
4. Babel CLI 설치 및 구성
여기까지 오면 또 한숨, Babel CLI의 설치와 ES5로의 변환 설정을 합시다.
Babel CLI는 babel 명령을 실행할 수 있도록 합니다.
Babel은 로컬로 설치합니다. 명령 프롬프트에서 다음을 실행합니다.
# Babel CLIのインストール
npm install --save-dev babel-cli
# ES5への変換に必要なプリセットのインストール
npm install --save-dev babel-preset-es2015
[babel-cli] babel 명령 행 실행 (es6 to es5)
http://qiita.com/a_ishidaaa/items/a0899d42ddc0545190a1
아마 3. 까지의 순서를 밟고 있으면 인스톨 할 수 있다.
여기 와서 며칠 걸렸어요. . .
5. 확인
현재 작업 디렉토리에 ES6에서 JavaScript를 작성하세요!
확인에 사용한 것은 이런 느낌입니다.
sample.jsclass Sample{
constructor(str, num){
this.str = str;
this.num = num;
}
disp(val){
alert(this.str);
alert(this.num+val);
}
}
let sample = new Sample('hello', 10);
sample.disp(100);
파일을 만든 후 명령 프롬프트로 다시.
다음 명령을 실행합니다.
babel sample.js
그러면 아래 코드가 화면에 나타날 것이라고 생각합니다.
'use strict';
--------------------------------------------
自動生成の読みづらいコードなので略
--------------------------------------------
var Sample = function () {
function Sample(str, num) {
_classCallCheck(this, Sample);
this.str = str;
this.num = num;
}
_createClass(Sample, [{
key: 'disp',
value: function disp(val) {
alert(this.str);
alert(this.num + val);
}
}]);
return Sample;
}();
var sample = new Sample('hello', 10);
sample.disp(100);
무사히 ES6→ES5 변환을 할 수 있게 되었습니다!
소감
Windows에서도 npm을 사용한 개발이 조금 쉬워졌습니까? 라고 느껴졌습니다.
끝까지 읽어 주셔서 감사합니다.
# Babel CLIのインストール
npm install --save-dev babel-cli
# ES5への変換に必要なプリセットのインストール
npm install --save-dev babel-preset-es2015
현재 작업 디렉토리에 ES6에서 JavaScript를 작성하세요!
확인에 사용한 것은 이런 느낌입니다.
sample.js
class Sample{
constructor(str, num){
this.str = str;
this.num = num;
}
disp(val){
alert(this.str);
alert(this.num+val);
}
}
let sample = new Sample('hello', 10);
sample.disp(100);
파일을 만든 후 명령 프롬프트로 다시.
다음 명령을 실행합니다.
babel sample.js
그러면 아래 코드가 화면에 나타날 것이라고 생각합니다.
'use strict';
--------------------------------------------
自動生成の読みづらいコードなので略
--------------------------------------------
var Sample = function () {
function Sample(str, num) {
_classCallCheck(this, Sample);
this.str = str;
this.num = num;
}
_createClass(Sample, [{
key: 'disp',
value: function disp(val) {
alert(this.str);
alert(this.num + val);
}
}]);
return Sample;
}();
var sample = new Sample('hello', 10);
sample.disp(100);
무사히 ES6→ES5 변환을 할 수 있게 되었습니다!