parcel-bundler javascript로 이용하기

parcel-bundler를 terminal의 커맨드라인에서 실행할 수 있습니다. 그러나, browsersync 등을 이용하기 위해서는 javascript에서 parcel-bundler의 middleware를 이용하여 node.js 등 javascript 파일 내에서 활용이 가능합니다. 이번 포스팅은 javascript에서 사용하기 위한 parcel-bundler 방법과, option들에 대해서 포스팅하고자 합니다. 자세한 코드를 보고싶으시면, 제 github repo를 확인해보시면 될 것 같습니다.

초기 설정

example을 만들기 위해 terminal에서 만들고자 하는 프로젝트 폴더를 만들어 줍니다.

mkdir parcel-js-example
cd parcel-js-example

plugin 설치

플러그인이 많이 필요하지 않습니다. 프로젝트를 만들기 위해서 저는 es6를 이용할 것이며, es6를 이용하기 위해 parcel에 내장되어 있는 babel을 이용하고자 합니다. es2015로 컨버팅을 하기 위해서 babel-preset-es2015 및 babel-preset-env를 설치할 것입니다.

npm init을 통해 pakcage.json을 기본 설치하도록 하겠습니다. 진행은 이전에 만들어놓은 parcel-js-example에서 계속 진행한다고 보시면 될 것 같습니다.

npm init

이후 앞서 말씀드린 세가지 플러그인을 설치하겠습니다. 기왕에 설치하는거 path 플러그인도 같이 설치하는 게 좋을 것 같습니다.

# npm
npm install parcel-bundler babel-preset-es2015 babel-preset-env path --dev

test file 만들기

설치가 완료되면, src 폴더에 index.html 및 main.js를 만들겠습니다.

<!-- src/index.html -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Parcel js test</title>
</head>
<body>
  <h1>Parcel Express + BrowserSync Proxy Test</h1>
  <textarea data-input="result"></textarea>
  <script src="./js/main.js"></script>
</body>
</html>

// src/js/main.js
(function () {
  console.log('parcel bundled!');
})();

setting file 만들기

setting할 파일에서 parcel-bundler를 import 합니다. (저는 따로 parcel.config.js를 놓았습니다.)

parcel.config.js에서는 parcel에 대한 번들링 설정만 놓고, 번들러의 middleware를 다른 곳에서도 모듈 형태로 사용할 수 있도록 했습니다. (이후 Node.js에서 middleware를 express 형태로 사용이 가능합니다.)

parcel.config.js

const Bundler = require('parcel-bundler')
const path = require('path')

// develop, production 모드에 따라서 번들링 설정을 다르게 할 예정입니다.
const isProd = process.env.NODE_ENV === 'production'

const defaultOption = {
  outDir: path.join(__dirname, '..', 'dist'),
  // index.html을 불러오는 경우, publicUrl을 /로 설정해주어야 정상적으로 import가 가능했습니다.
  publicUrl: '/',
  detailReport: true,
  cache: true,
  minify: true,
  sourceMaps: true,
  http: ture
}

// 모드에 따라 옵션을 설정합니다.
let option
if (isProd) {
  option = {
    ...
  }
} else {
  option = {
    ...
  }
}

// 번들러를 선언해줍니다.
const bundler = new Bundler('번들링할 파일 경로', Object.assign({}, defaultOption, option))

module.exports = bundler

Node.js Express에서 사용

express에서 해당 bundler를 가져와 middleware function을 실행합니다.

const express = require('express')
const bundler = require('parcel.config')

const app = express()

app.use(bundler.middleware())

Application 로딩시에 bundler에서 파일을 번들링합니다.

parcel module 사용

bundler.js를 생성합니다.

// bundler.js
const bundler = require('parcel.config.js)

bundler.middleware();

command 실행

앞서 NODEENV를 통해서 분기처리를 했기 때문에, command에서 NODEENV를 설정해 줍니다.

# production
NODE_ENV=production & node server.js
# development
NODE_ENV=development & node server.js

만약 bundler를 통한 bundle만 실행시키고 싶으시다면, 다음과 같이 실행하시면 됩니다.

# production
NODE_ENV=production & node bundler.js
# development
NODE_ENV=development & node bundler.js

자세한 사항은 제가 만든 example을 참조하시면 도움이 되실 것 같습니다 :) github repo

게으른 개발자

parcel-bundler javascript에서 실행하기

February 19, 2018