20210603 Bundler02 : webpack-Babel, NPX, degit, Netlify 배포

Bundler02

Babel

• npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime

• @babel/preset-env : js의 기능을 한번에 지원하는 패키지 (배열 형태로 넣음)

• plugins : (2차원 배열로 넣어야 함, 배열안에 배열이 들어 있는 형태)

  • @babel/plugin-transform-runtime : 비동기 처리를 위한 패키지

• .babelrc.js 파일

module.exports = {
  presets: ["@babel/preset-env"],
  plugins: [["@babel/plugin-transform-runtime"]],
};

• webpack.config 파일에 rules에 js 파일에 대한 로더를 붙여 줘야 함
• npm i -D babel-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.s?css$/,
        use: ["style-loader", "css-loader", "postcss-loader", "sass-loader"],
      },
      {
        test: /\.js$/,
        use: ["babel-loader"],
      },
    ],
  },
};

npm 프로젝트 Netlify 배포

• github에 코드를 올리고 해당 프로젝트를 선택하고 Netlify를 통해서 배포함
• 기존의 일반 프로젝트와 달리 npm 프로젝트의 경우 제품화 command 설정과 Publish directory 설정에 주의해야 함

NPX, Degit

• 매번 이러한 번들러 설정들을 프로젝트 생성때 마다 한다는 것은 힘듦
• 그래서, github에 해당 번들러의 template를 만들어 놓고 프로젝트 생성때만 가져와서 사용 가능함

• NPX 명령어는 npm말고 nodejs에서 지원하는 명령어로 Package Runner 임 (npm 프로젝트 시작 없이 패키지 관련한 명령어를 실행 시킬수 있음)

• degit 을 사용하면 github repo에서 파일만 복사해서 가져옴 (commit 추적 내용은 없이)
• npx degit 레포이름 복사할위치의폴더이름