Frontend 에서 Npm 모듈 사용하기
지금 일하는 곳에서 frontend 모듈 의존성 관리를 위해서 Bower를 사용하고 있다. 하지만 Bower를 더 이상 사용하지 말고 Yarn나 webpack를 사용하라고 추천 하고 있다.
Node의 모듈 의존성 관리를 위해 npm을 사용하고 있는데, Npm으로 frontend 까지 처리하고 싶은 욕심이 생겨서 좀 검색을 해보다가 frontend-dependencies을 찾았다.
단순하게 node_modules에 있는 특정 디렉토리 또는 파일을 원하는 곳으로 복사하는 기능이지만, 이 정도면 충분한거 같아서 사용하고 있다.
# 설치
npm install --save frontend-dependencies
설치 이후에 package.json 에 설정을 해줘야 한다. 다음은 frontend-dependencies의 full example를 발췌 하였다.
{
"name": "frontend-dependencies-test",
"version": "1.0.0",
"description": "frontend-dependencies test project",
"main": "index.js",
"author": "Matias Surdi <matias@surdi.net>",
"license": "Apache-2.0",
"dependencies": { },
"devDependencies": {
"shelljs": "0.7.4"
},
## 추가되는 내용!!!
"frontendDependencies": {
"target": "static/",
"packages": {
"jquery": { // npm package name
"version": "3.1.0", // for `npm install`: version, tag or version range
"src": "dist/*" // relative path in package to copy files
"namespaced": true // extra parent folder with package Name
},
"normalize.css": { // copy whole package
"version": "4.2.0"
},
"turbolinks": {
// alternative to 'version`: specifie git url, tarball url, tarball file, folder
"url": "git://github.com/turbolinks/turbolinks.git",
"src": "{src,LICENSE}", // copy multiple files
"target": "static/turbo" // specific target path
}
}
}
}
내 경우에는 특정 파일을 지정하기 귀찮아서 전체 파일을 복사하게 아래와 같이 사용하고 있다.
"frontendDependencies": {
"target": "public/static/",
"packages": {
"jquery": {
"version": "3.1.0",
"namespace": true
},
"bootstrap": {
"version": "4.3.1",
"namespace": true
},
"axios": {
"version": "^0.18.0",
"namespace": true
}
}
}
그리고 실제 파일을 복사하기 위해 다음과 같은 명령어를 실행해야 한다.
# 파일 복사 진행
node ./node_modules/frontend-dependencies/index.js
간단하게 package.json에 scripts에 추가해서 사용해도 된다.
"scripts": {
"postinstall": "node ./node_modules/frontend-dependencies/index.js"
}