NPM 모듈을 사용할때 package.json 안에 dependencies 항목에 원하는 패키지를 기술한다.

이때 Git 저장소로 구성되어있는 패키지의 경우, 설정하기가 곤란한데, 간단한 방법을 알아보자.

  • ssh 로 설정 할 경우
    • 가장 무난하지만 22 번 포트가 막혀있다면 사용하기 어렵다.
  • https 로 설정 할 경우
    • user-name 과 password 를 경로에 입력하는 방법으로, 계정과 비번이 노출되는 단점이 있다.
  • 환경에 git credential 설정 후 https 로 설정 할 경우
    • user-name 과 password 를 입력하지 않아도 된다.
// ssh 로 설정 할 경우
"dependencies": {
  "my-git-module": "git+ssh://git@{package-git-url}/my-git-module#master",
}

// https 로 설정 할 경우
"dependencies": {
  "my-git-module": "git+https://{user-name}:{password}@{package-git-url}/my-git-module#master",
}

// git credential 설정 후 https 로 설정
$ git config --global user.name {user-name}
$ git config --global user.password {password}
$ git config --global --replace-all credential.helper "cache --timeout=3600"

"dependencies": {
  "my-git-module": "git+https://{package-git-url}/my-git-module#master",
}

'Web' 카테고리의 다른 글

[Javascript] String 과 Array 변환  (0) 2021.01.31
[Javascript] Number 진법 변환  (0) 2021.01.31
개발 블로그 링크  (0) 2020.07.05
[Chrome] DNS_PROBE_FINISHED_NXDOMAIN 오류  (0) 2019.04.09
[Javascript] Drag&Drop 을 막고싶은 경우  (0) 2019.02.25
Posted by leechwin
,

gitlab 이나 github 등을 이용하면서 git branch, tag, commit history 등 git repository 자체를 export 해서 다른 repository 에 import 해야할 경우가 있다.

이때 gitlab 이나 github 등의 UI 에서 export 를 제공해주는 경우도 있지만, 그러지 못한 환경일 경우, git command 로 export 하는 방법을 알아본다.

Export

1. --mirror 옵션으로 git clone

git clone --mirror {git repository url}
# ex)
$ git clone --mirror https://github.com/leechwin/leechwin.github.com
   --mirror
       Set up a mirror of the source repository. This implies --bare. Compared to --bare,
       --mirror not only maps local branches of the source to local branches of the
       target, it maps all refs (including remote-tracking branches, notes etc.) and sets
       up a refspec configuration such that all these refs are overwritten by a git remote
       update in the target repository.

2. git clone 을 수행하면 xxx.git 폴더가 생기고 다음과 같은 내용이 들어있다.

xxx.git
.
├── branches
├── config
├── description
├── HEAD
├── hooks
│   ├── applypatch-msg.sample
│   ├── commit-msg.sample
│   ├── post-update.sample
│   ├── pre-applypatch.sample
│   ├── pre-commit.sample
│   ├── prepare-commit-msg.sample
│   ├── pre-push.sample
│   ├── pre-rebase.sample
│   └── update.sample
├── info
│   └── exclude
├── objects
│   ├── info
│   └── pack
│       ├── pack-bf556429f20d728f5f1e40739c8e886b0ac1eca7.idx
│       └── pack-bf556429f20d728f5f1e40739c8e886b0ac1eca7.pack
├── packed-refs
└── refs
    ├── heads
    └── tags

3. 위의 xxx.git 폴더를 압축하여 필요한곳으로 파일로 전송할 수도 있다.

Import

1. export 된 파일의 압축을 풀고 해당 xxx.git 폴더안에서 다음명령을 통해 새로운 repository 로 연동할 수 있다.

# 폴더 안으로 이동
$ cd xxx.git

# 새로운 repository 설정
$ git remote set-url --push origin {new git repository url}
# ex)
$ git remote set-url --push origin https://github.com/leechwin/new.leechwin.github.com

# 새로운 repository 에 push
$ git push --mirror

다른 Git 간에 특정 branch 를 복사하고 싶을때

# 새로 이동될 git
$ git clone {git repository url}
$ cd xxx
# 복사할 대상 git 을 upstream 으로 설정
$ git remote add upstream {git repository url}
$ git fetch upstream

# 복사할 대상 git 의 branch 로 부터 branch 생성
# git checkout -b {생성할 branch 이름} {원격 저장소의 branch 이름}
$ git checkout -b test-branch upstream/test-branch
// 새로 추가된 branch를 upstream에서 내 repository의 remote를 따라가도록 설정
$ git branch -u origin/{생성할 branch 이름}
$ git push origin
Posted by leechwin
,

Webpack 을 이용하여 번들링시에 package.json 에 기술된 모듈들은 대부분 번들링프로세싱에서 제외시키고 번들링을 한다.

{
    test: /\.(js|jsx)$/,
    // package.json 에 기술되어 설치된 npm 모듈들은 Babel 에서 제외 "/node_modules/" 하위 디렉토리
    exclude: /node_modules/,
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
},

하지만 최근 일부 npm 모듈들은 IE11 를 지원하지 않는 모듈들도 나타나서 이런 모듈들을 포함해서 쓸경우 IE에서 실행할경우 ES6 미지원에 대한 에러가 발생하는 경우가 있다.

이런 브라우져들도 지원을 하려면 이때 package.json 에 기술되었더라도 Babel 을 이용한 번들링이 필요한데, 이때 다음과 같은 정규식 문법으로 exclude 필드에서 제외하는 방법이 있다.

{
    test: /\.(js|jsx)$/,
    // swagger-parser - v10.0.2
    // swagger-parser 의 경우 내부적으로 ES6의 모듈 2개에 대한 디펜던시를 가지고 있는데
    // 해당 모듈들을 찾아서 다음과같이 babel-loader 에 exclude 에 포함되지 않도록 설정한다
    exclude: /node_modules\/(?!(@apidevtools|@jsdevtools))/,
    loader: 'babel-loader?cacheDirectory',
    options: {
      presets: ['@babel/preset-env']
    }
},

위와같이 처리하고 Webpack 번들링을 수행하면, IE11 에서도 에러없이 ES6가 폴리필처리되어 잘 수행된다.

참고: tech.kakao.com/2020/12/01/frontend-growth-02/

Posted by leechwin
,