1. node.js 설치
2. npm과 yarn의 차이점
- 기존에는 대부분 npm을 사용해 왔다. 이번에 새로 개발된 yarn을 써보려고 함 (패키지 관리 도구)
- npm : 여러 패키지를 설치할 때 패키지가 완전히 설치 될 때까지 기다린 후 다른 패키지를 설치 (패키지별 순차적 실행)
- yarn : 병렬로 설치하므로 퍼포먼스와 속도 증가
(ex : React 설치시 npm - 3.572 sec, yarn - 1.44 sec)
- yarn은 자동으로 lock 파일을 생성함
- npm은 다른 패키지를 즉시 포함시킬 수 있는 코드를 자동으로 실행하므로 보안 시스템에 여러 취약성 발생
- yarn은 yarn.lock 또는 package.json 파일이 있는 파일만 설치. (yarn이 npm 패키지보다 보안이 강화된 것으로 간주)
- yarn은 효율적인 캐시 시스템과 기타 부가 기능 제공
npm과 yarn에서 다른 명령어
Command | npm | yarn |
Install dependencies | npm install | yarn |
Install package | npm install [package] | yarn add [package] |
Install dev package | npm install --save-dev [package] | yarn add --dev [package] |
Uninstall package | npm uninstall [package] | yarn remove [package] |
Uninstall dev package | npm uninstall --save-dev [package] | yarn remove [package] |
Update | npm update | yarn upgrade |
Update package | npm update [package] | yarn upgrade [package] |
Global install package | npm install --global [package] | yarn global add [package] |
Global uninstall package | npm uninstall --global [package] | yarn global remove [package] |
npm과 yarn에서 같은 명령어
npm | yarn |
npm init | yarn init |
npm run | yarn run |
npm test | yarn test |
npm login (and logout) | yarn login (and logout) |
npm link | yarn link |
npm publish | yarn publish |
npm cache clean | yarn cache clean |
3. yarn 설치
npm install -g yarn
yarn --version 으로 제대로 설치되었는지 확인
원하는 경로에
yarn init
yarn init v1.22.17
question author:
question license (MIT):
question private:
success Saved package.json
Done in 119.58s.
yarn init만 해주고 나머지는 그냥 enter로 skip하면 package.json 파일이 생성 됨
4. Webpack 설치
yarn add webpack webpack-cli --dev
yarn add v1.22.17
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 103 new dependencies.
info Direct dependencies
├─ webpack-cli@4.9.2
└─ webpack@5.68.0
info All dependencies
├─ @discoveryjs/json-ext@0.5.6
├─ @types/eslint-scope@3.7.3
├─ @types/eslint@8.4.1
├─ @types/json-schema@7.0.9
├─ @types/node@17.0.14
├─ @webassemblyjs/floating-point-hex-parser@1.11.1
├─ @webassemblyjs/helper-numbers@1.11.1
├─ @webassemblyjs/helper-wasm-section@1.11.1
├─ @webassemblyjs/wasm-edit@1.11.1
├─ @webassemblyjs/wasm-opt@1.11.1
├─ @webassemblyjs/wast-printer@1.11.1
├─ @webpack-cli/configtest@1.1.1
├─ @webpack-cli/info@1.4.1
├─ @webpack-cli/serve@1.6.1
├─ @xtuc/ieee754@1.2.0
├─ acorn-import-assertions@1.8.0
├─ acorn@8.7.0
├─ ajv-keywords@3.5.2
├─ ajv@6.12.6
├─ browserslist@4.19.1
├─ buffer-from@1.1.2
├─ caniuse-lite@1.0.30001307
├─ chrome-trace-event@1.0.3
├─ clone-deep@4.0.1
├─ colorette@2.0.16
├─ commander@7.2.0
├─ cross-spawn@7.0.3
├─ electron-to-chromium@1.4.64
├─ enhanced-resolve@5.8.3
├─ envinfo@7.8.1
├─ es-module-lexer@0.9.3
├─ escalade@3.1.1
├─ eslint-scope@5.1.1
├─ esrecurse@4.3.0
├─ estraverse@4.3.0
├─ events@3.3.0
├─ execa@5.1.1
├─ fast-deep-equal@3.1.3
├─ fast-json-stable-stringify@2.1.0
├─ fastest-levenshtein@1.0.12
├─ find-up@4.1.0
├─ function-bind@1.1.1
├─ get-stream@6.0.1
├─ graceful-fs@4.2.9
├─ has-flag@4.0.0
├─ has@1.0.3
├─ human-signals@2.1.0
├─ import-local@3.1.0
├─ interpret@2.2.0
├─ is-core-module@2.8.1
├─ is-plain-object@2.0.4
├─ is-stream@2.0.1
├─ isexe@2.0.0
├─ isobject@3.0.1
├─ jest-worker@27.4.6
├─ json-parse-better-errors@1.0.2
├─ json-schema-traverse@0.4.1
├─ loader-runner@4.2.0
├─ locate-path@5.0.0
├─ mime-db@1.51.0
├─ mime-types@2.1.34
├─ mimic-fn@2.1.0
├─ neo-async@2.6.2
├─ node-releases@2.0.1
├─ npm-run-path@4.0.1
├─ onetime@5.1.2
├─ p-limit@2.3.0
├─ p-locate@4.1.0
├─ p-try@2.2.0
├─ path-exists@4.0.0
├─ path-key@3.1.1
├─ path-parse@1.0.7
├─ picocolors@1.0.0
├─ pkg-dir@4.2.0
├─ punycode@2.1.1
├─ randombytes@2.1.0
├─ rechoir@0.7.1
├─ resolve-cwd@3.0.0
├─ resolve-from@5.0.0
├─ resolve@1.22.0
├─ safe-buffer@5.2.1
├─ schema-utils@3.1.1
├─ serialize-javascript@6.0.0
├─ shallow-clone@3.0.1
├─ shebang-command@2.0.0
├─ shebang-regex@3.0.0
├─ signal-exit@3.0.7
├─ source-map-support@0.5.21
├─ source-map@0.6.1
├─ strip-final-newline@2.0.0
├─ supports-color@8.1.1
├─ supports-preserve-symlinks-flag@1.0.0
├─ tapable@2.2.1
├─ terser-webpack-plugin@5.3.1
├─ terser@5.10.0
├─ uri-js@4.4.1
├─ watchpack@2.3.1
├─ webpack-cli@4.9.2
├─ webpack-merge@5.8.0
├─ webpack-sources@3.2.3
├─ webpack@5.68.0
├─ which@2.0.2
└─ wildcard@2.0.0
Done in 7.67s.
프로젝트 폴더에 webpack.config.js 파일 생성 (이 파일 기반으로 webpack 설정)
1
2
3
4
5
6
7
8
9
10
11
|
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
|
cs |
path : Node에서 제공하는 경로작업을 위한 패키지 (path.resolve를 사용하면 인자로 넘겨준 값을 합쳐 경로 반환)
entry : 처음 시작하는 파일의 경로로 입력해주면 그와 연결된 모든 파일이 모여 하나의 파일로 생성
output : 만들어진 파일은 output의 filename에 적힌 이름은로 path에 적힌 경로에 저장
yarn add --dev webpack webpack-dev-server
yarn add @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript vue vue-loader vue-template-compiler babel-loader css-loader vue-style-loader html-webpack-plugin rimraf style-loader sass-loader node-sass -D
프로젝트에 의존성 설치 (필요한걸 골라서 설치하면 됨)
.babelrc.js 파일을 새로 생성하고 다음과 같이 입력
1
2
3
4
5
|
// .babelrc
module.exports = {
'presets': ['@babel/preset-env']
}
|
cs |
preset-env : 자바스크립트의 확정되지 않은 proposal 스펙의 모든 stage의 preset
webpack.config.js파일을 아래와 같이 수정
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './index.html',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/i,
use: 'babel-loader'
},
{
test: /\.css/i,
use: ['style-loader', 'css-loader']
}
, {
test: /\.vue/i,
use: 'vue-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin()
]
}
|
cs |
package.json 파일에 아래와 같이 추가
1
2
3
4
5
6
7
|
{
"scripts": {
"build": "webpack -w",
"serve": "webpack-dev-server --mode development",
"dev-server": "webpack-dev-server --open"
}
}
|
cs |
index.html 파일을 만들고 실행하면 정상으로 실행 됨
서버 실행
yarn run serve
'Programming > [Node.js]' 카테고리의 다른 글
[Node.Js] Node.Js - Gulp & BrowserSync (0) | 2019.06.13 |
---|---|
[Node.js] Node.JS (0) | 2019.06.12 |