자바사춘기
117
2019-06-20 23:14:39
2
125

node.js 로 오픈소스 모듈 커스터마이징? 사용하기 방법..



안녕하세요.

주로 백엔드만 주구장창 개발하다가. 이번에 갑자기 프론트엔드 개발로. node 기반의 오픈소스를 github에서 다운받아 커스터마이징등을 해야 하는 입장입니다.


다음과 같은 문의 사항이 있습니다.

조언 부탁드립니다.

기본적인 ecma6, npm build, npm install, npm start, 번들러 등에 대한 내용은 숙지하였고. 오픈소스 하나를 github에서 체크아웃 받아. ecmascript 5로 번들링 및 트랜스파일링을 하고 난 후. xxx.js 등을 최종 빌드하여. 해당 스크립트를 예전 방식대로 script 태그로 임포트. index.html 에서 동작은 확인한 상태입니다.


git에서 다운받은 오픈소스의 ecma6 로 작성된 라이브러리 모듈들. "node_modules" 하위에 위치한 모듈들을 제가 작성하려는 모듈에서 import하여 사용하는 방법을 모르겠습니다.


폴더 구조는 다음과 같습니다.


root-
        dist
        node_modules
                    - xxx
        src


1. 제가 새로 작성할 my_module.js 는 어디에 위치하여야 하는지요?

   - 위치 이후에. package.json 이나 어딘가에 추가로 선언이나 설정을 해야 하는지요?


2. 해당 my_module.js 를 src 에 존재하는 index.js라 가정하고. index.js 소스에 다음과 같은 코드를 넣었지만 임포트가 되지 않습니다. (인식이 안됩니다.)

import {xxx} from 'xxx'


3.  다음의 각 3가지 케이스에 해당하는 임포트 문장의 차이가 궁금합니다.

1. import {xxx} from 'xxx'
2. import {xxx} from 'xxx.js'
3. import {xxx} from './xxx.js'


4. 제가 하려는 일. git 에서 node 기반의 오픈소스를 다운로드받아. node_modules 안에 있는 ecma6의 모듈등을 import 하여 제가 사용하면서 확장/커스터마이징을 하려 했을 때. 도움이 될 만한 링크나. 학습 로드맵, 혹은 서적등이 있는지 추천을 부탁드려봅니다. 온라인 강의라도 괜찮구요. ㅠㅠ 


5. ecma6 로 모듈등을 개발할 때. 개발 scope 주기가 다음과 같은지 궁금합니다. 항상 마지막 dist까지 가서 최종 js를 떨구고. 그걸 index.html 에 임포트하여서. node 로 띄운 로컬서버에서 확인을 해야 하는지요? 모듈에 alert 하나 추가한 것을 확인하기 위해. 다음의 모든 과정을 거쳐야 하는지 궁금합니다.

  - npm build

  - rollup -c

  - npm start localhost:1234/index.html

  - 브라우저에서 새로고침하여 확인.


조언 부탁드리겠습니다. 



0
0
  • 답변 2

  • 아이원가습기
    223
    2019-06-21 13:18:41

    node 기본 모듈방식은 common js방식이고 const xxx = require("xxx")로 하셔야됩니다

    0
  • 자바사춘기
    117
    2019-06-23 22:36:58

    답변감사드립니다.

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.