웹 프론트엔드 유틸리티 라이브러리를 인수한다. - 8월 30일

[woowahan-pjs]

• 저장소: https://github.com/2SOOY/woowacourse-random-util-fe
• 배포: https://www.npmjs.com/package/woowacourse-util

관련 이슈: #86

[2SOOY]

배포 (패키지 url 변경되었습니다)

1. 저장소: https://github.com/2SOOY/woowacourse-random-util-fe
2. url: https://www.npmjs.com/package/woowacourse-util

문제점

설치한 패키지를 사용할 수 없음

1. 배포 자체는 성공했으나, 프리코스 환경에서 미션을 진행할 때, live server or http-server를 활용하여 개발을 진행함
2. 해당 서버는 import로 가져온 모듈을 인식하지 못하는 문제 발생
   
   

대안

1. 랜덤 유틸 라이브러리를 내장하여 제공

└── js
    ├── lib
    │   └── random.js

2. parcel과 같은 번들러에서 제공하는 dev-server 사용하도록 제시

npm i -g parcel-bundler
parcel watch index.html

[2SOOY]

@woowahan-pjs @woowapark

유틸 라이브러리 배포 관련해서 정리했습니다
확인부탁드립니다 :)

종합

1. 저장소: https://github.com/2SOOY/woowacourse-random-util-fe
2. 배포된 NPM 경로: https://www.npmjs.com/package/woowacourse-util

배포 하기

1. 배포 전 빌드에 필요한 패키지 설치하기

   npm i -D @babel/core @babel/preset-env babel-loader webpack webpack-cli

   • 바벨이 필요한 이유
     • Random 클래스 내에서 private method(#) 를 사용하기 때문에, 해당 기능을 지원하지 않는 브라우저에 대응하기 위함

2. 웹팩 설정하기

   • 유틸 라이브러리를 <script> 사용 시 전역 객체로 제공 + 다양한 모듈 방식 지원을 위해 output 옵션의 library type을 umd 로 지정해줌

   • CODE

     // webpack.config.js
     
     const path = require("path");
     
     module.exports = {
       entry: "./src/index.js",
       output: {
         path: path.resolve(__dirname, "lib"),
         filename: "[name].js",
         library: { /* <script/> 형태의 제공 및 다양한 모듈 방식 */
           name: "WoowaUtil", /* 빌드된 전역 객체의 이름 */
           type: "umd",
         },
         clean: true,
       },
       resolve: {
         extensions: [".js"],
       },
       devtool: false,
       module: {
         rules: [
           {
             test: /\.js$/,
             exclude: [/node_modules/],
             use: {
               loader: "babel-loader",
               options: {
                 presets: ["@babel/preset-env"],
                 plugins: ["@babel/plugin-proposal-class-properties"],
               },
             },
           },
         ],
       },
     };

3. package.json 설정 + 배포하기

   // package.json
   
   {
     "name": "woowacourse-util", // 배포할 패키지 이름
     "version": "0.0.3",
     "main": "lib/main.js",      // 배포할 파일 entry 
     "license": "MIT",
     "scripts": {
       "build:dev": "webpack --mode=development",
       "build:prod": "webpack --mode=production"
     },
     "devDependencies": {
       "@babel/cli": "^7.15.4",
       "@babel/core": "^7.15.4",
       "@babel/preset-env": "^7.15.4",
       "babel-loader": "^8.2.2",
       "webpack": "^5.52.0",
       "webpack-cli": "^4.8.0"
     }
   }

   // 빌드 및 배포하기
   
   npm run build:prod
   npm publish // 배포 완료

4. CDN 사용하기

   • https://www.jsdelivr.com/

   • jsdelivr를 이용하면 npm에 배포된 패키지를 별도의 작업 없이 cdn 형태로 제공할 수 있음
     

   • CDN 스크립트 사용법

     <script src="https://cdn.jsdelivr.net/npm/[패키지이름]/[배포 경로]"></script>
     
     // ex) <script src="https://cdn.jsdelivr.net/npm/woowacourse-util/lib/main.js"></script>