Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

Firebase에서 모듈 번들러 사용

JavaScript 모듈 번들러는 많은 작업을 수행할 수 있지만 가장 유용한 기능 중 하나는 코드 기반에 외부 라이브러리를 추가하고 사용하는 기능입니다. 모듈 번들러는 코드에서 가져오기 경로를 읽고 애플리케이션별 코드를 가져온 라이브러리 코드와 결합(번들링)합니다.

버전 9 이상부터 Firebase JavaScript SDK는 모듈 번들러의 최적화 기능과 함께 작동하도록 최적화되어 최종 빌드에 포함된 Firebase 코드의 양을 줄입니다.

import { initializeApp } from 'firebase/app';
import { getAuth, onAuthStateChanged, getRedirectResult } from 'firebase/auth';

const firebaseApp = initializeApp({ /* config */ });
const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => { /* check status */ });

/**
 * getRedirectResult is unused and should not be included in the code base.
 * In addition, there are many other functions within firebase/auth that are
 * not imported and therefore should not be included as well.
 */

라이브러리에서 사용하지 않는 코드를 제거하는 이 프로세스를 트리 쉐이킹이라고 합니다. 이 코드를 손으로 수동으로 제거하는 것은 시간이 많이 걸리고 오류가 발생하기 쉽지만 모듈 번들러는 이 제거를 자동화할 수 있습니다.

JavaScript 생태계에는 많은 고품질 모듈 번들러가 있습니다. 이 가이드와 중포 기지를 이용하여 피복에 집중 웹팩 , 롤업esbuild .

시작하다

이 가이드를 사용하려면 개발 환경에 npm이 설치되어 있어야 합니다. npm은 종속성(라이브러리)을 설치하고 관리하는 데 사용됩니다. NPM를 설치하려면, Node.js를 설치 NPM 자동으로 포함됩니다.

대부분의 개발자는 Node.js를 설치하면 제대로 설정됩니다. 그러나 많은 개발자가 환경을 설정할 때 겪는 일반적인 문제가 있습니다. 당신이 오류가 발생하면, 환경이 NPM의 CLI이 있는지 확인 하고 설정 한 적절한 권한이 있는지 당신은 그래서 sudo는 명령을 관리자로 패키지를 설치할 필요가 없습니다 .

package.json 및 Firebase 설치

당신이 NPM 설치 한 후에 당신은 만들어야합니다 package.json 지역 프로젝트의 루트에 파일을. 다음 npm 명령을 사용하여 이 파일을 생성합니다.

npm init

마법사를 통해 필요한 정보를 제공할 수 있습니다. 파일이 생성되면 다음과 같이 보일 것입니다.

{
  "name": "your-package-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {

  }
}

이 파일은 여러 가지를 담당합니다. 모듈 번들링 및 JavaScript 코드 빌드에 대해 일반적으로 더 자세히 알고 싶다면 이 파일을 숙지해야 합니다. 이 가이드의 중요한 부분이있다 "dependencies" 객체입니다. 이 개체는 설치한 라이브러리와 사용 중인 버전의 키 값 쌍을 보유합니다.

종속성을 추가하는 관통 수행 npm install 또는 npm i 명령.

npm i firebase

당신이 실행하는 경우 npm i firebase , 설치 과정은 업데이트됩니다 package.json 종속성으로 목록 중포 기지로를 :

  "dependencies": {
    "firebase": "^9.0.0"
  },

키는 라이브러리 이름이고 값은 사용할 버전입니다. 버전 값은 유연하며 값 범위를 허용할 수 있습니다. 이것은 의미론적 버전 관리 또는 semver로 알려져 있습니다. semver에 대한 자세한 내용은, 의미 론적 버전에 대한 NPM의 설명서를 참조하십시오 .

소스 대 빌드 폴더

작성한 코드는 모듈 번들러에서 읽고 처리한 다음 새 파일 또는 파일 세트로 출력합니다. 이 두 가지 유형의 파일을 분리하는 것이 중요합니다. 모듈 번들러가 읽고 처리하는 코드를 "소스" 코드라고 합니다. 그들이 출력하는 파일은 빌드 또는 "배포"(배포) 코드로 알려져 있습니다.

코드베이스의 일반적인 설치 폴더라는에 저장하는 소스 코드입니다 src 와라는 이름의 폴더에 내장 된 코드 dist .

- src
 |_ index.js
 |_ animations.js
 |_ datalist.js


- dist
 |_ bundle.js

위의 예제 파일 구조에서, 그 고려 index.js 수입을 모두 animations.jsdatalist.js . 모듈 들러 소스 코드를 처리 할 때 그것은 생산합니다 bundle.js 에서 파일 dist 폴더에 있습니다. bundle.js 에있는 파일의 조합 src 가져 오기뿐만 아니라 폴더 및 라이브러리.

당신은 그런 힘내 같은 소스 제어 시스템을 사용하는 경우는 무시하는 것이 일반적입니다 dist 주요 저장소에이 코드를 저장할 때 폴더에 있습니다.

진입점

모듈 번들러에는 모두 진입점 개념이 있습니다. 애플리케이션을 파일 트리로 생각할 수 있습니다. 한 파일은 다른 파일에서 코드를 가져오는 식으로 진행됩니다. 이것은 하나의 파일이 트리의 루트가 될 것임을 의미합니다. 이 파일을 진입점이라고 합니다.

이전 파일 구조 예제를 다시 살펴보겠습니다.

- src
 |_ index.js
 |_ animations.js
 |_ datalist.js


- dist
 |_ bundle.js
// src/index.js
import { animate } from './animations';
import { createList } from './datalist';

// This is not real code, but for example purposes only
const theList = createList('users/123/tasks');
theList.addEventListener('loaded', event => {
  animate(theList);
});

src/index.js 는 응용 프로그램에 필요한 모든 코드의 수입을 시작하기 때문에 파일은 진입 점으로 간주됩니다. 이 진입점 파일은 모듈 번들러가 번들링 프로세스를 시작하는 데 사용됩니다.

웹팩과 함께 Firebase 사용

Firebase 앱 및 웹팩에 필요한 특정 구성은 없습니다. 이 섹션에서는 일반적인 웹팩 구성을 설명합니다 .

첫 번째 단계는 npm에서 개발 종속성으로 웹팩을 설치하는 것입니다.

npm i webpack webpack-cli -D

해당 지역의 프로젝트라는 이름의 루트에 파일 만들기 webpack.config.js 하고 다음 코드를 추가합니다.

const path = require('path');

module.exports = {
  // The entry point file described above
  entry: './src/index.js',
  // The location of the build folder described above
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  // Optional and for development only. This provides the ability to
  // map the built code back to the original source format when debugging.
  devtool: 'eval-source-map',
};

그런 다음 Firebase가 종속성으로 설치되어 있는지 확인합니다.

npm i firebase

그런 다음 코드 베이스에서 Firebase를 초기화합니다. 다음 코드는 진입점 파일에서 Firebase를 가져오고 초기화하고 Firestore Lite를 사용하여 "도시" 문서를 로드합니다.

// src/index.js
import { initializeApp } from 'firebase/app';
import { getFirestore, doc, getDoc } from 'firebase/firestore/lite';

const firebaseApp = initializeApp({ /* config */ });
const db = getFirestore(firebaseApp);

async function loadCity(name) {
  const cityDoc = doc(db, `cities/${name}`);
  const snapshot = await getDoc(cityDoc);
  return {
    id: snapshot.id,
    ...snapshot.data(),
  };
}

다음 단계는 것입니다 NPM 스크립트 추가 웹팩 빌드를 실행합니다. 열기 package.json 파일과에 다음 키 값 쌍을 추가 "scripts" 객체입니다.

  "scripts": {
    "build": "webpack --mode=development"
  },

webpack을 실행하고 빌드 폴더를 생성하려면 다음 명령을 실행하십시오.

npm run build

마지막으로, 확인 dist 빌드 폴더에 있습니다. 그것은라는 이름의 파일이 포함되어야 bundle.js 하여 번들 응용 프로그램과 의존성 코드가 포함되어 있습니다.

생산을 위해 웹팩 빌드를 최적화에 대한 자세한 내용은, 그들의 공식 문서를 참조 은 "모드"구성 설정을 .

롤업과 함께 Firebase 사용

Firebase 앱 및 롤업에 필요한 특정 구성은 없습니다. 이 섹션에서는 일반적인 롤업 구성을 다룹니다.

첫 번째 단계는 npm과 함께 설치된 종속성에 가져오기를 매핑하는 데 사용되는 플러그인과 롤업을 설치하는 것입니다.

npm i rollup @rollup/plugin-node-resolve -D

해당 지역의 프로젝트라는 이름의 루트에 파일 만들기 rollup.config.js 하고 다음 코드를 추가합니다.

import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  // the entry point file described above
  input: 'src/index.js',
  // the output for the build folder described above
  output: {
    file: 'dist/bundle.js',
    // Optional and for development only. This provides the ability to
    // map the built code back to the original source format when debugging.
    sourcemap: 'inline',
    // Configure Rollup to convert your module code to a scoped function
    // that "immediate invokes". See the Rollup documentation for more
    // information: https://rollupjs.org/guide/en/#outputformat
    format: 'iife'
  },
  // Add the plugin to map import paths to dependencies
  // installed with npm
  plugins: [nodeResolve()]
};

그런 다음 코드 베이스에서 Firebase를 초기화합니다. 다음 코드는 진입점 파일에서 Firebase를 가져오고 초기화하고 Firestore Lite를 사용하여 "도시" 문서를 로드합니다.

// src/index.js
import { initializeApp } from 'firebase/app';
import { getFirestore, doc, getDoc } from 'firebase/firestore/lite';

const firebaseApp = initializeApp({ /* config */ });
const db = getFirestore(firebaseApp);

async function loadCity(name) {
  const cityDoc = doc(db, `cities/${name}`);
  const snapshot = await getDoc(cityDoc);
  return {
    id: snapshot.id,
    ...snapshot.data(),
  };
}

다음 단계는 것입니다 NPM 스크립트 추가 롤업 빌드를 실행합니다. 열기 package.json 파일과에 다음 키 값 쌍을 추가 "scripts" 객체입니다.

  "scripts": {
    "build": "rollup -c rollup.config.js"
  },

롤업을 실행하고 빌드 폴더를 생성하려면 다음 명령을 실행합니다.

npm run build

마지막으로, 확인 dist 빌드 폴더에 있습니다. 그것은라는 이름의 파일이 포함되어야 bundle.js 하여 번들 응용 프로그램과 의존성 코드가 포함되어 있습니다.

생산을위한 당신의 롤업 빌드를 최적화에 대한 자세한 내용은 공식 문서를 참조하십시오 생산 구축을위한 플러그인에 .

esbuild와 함께 Firebase 사용

Firebase 앱 및 esbuild에 필요한 특정 구성은 없습니다. 이 섹션에서는 일반적인 esbuild 구성을 다룹니다.

첫 번째 단계는 esbuild를 개발 종속성으로 설치하는 것입니다.

npm i esbuild -D

해당 지역의 프로젝트라는 이름의 루트에 파일 만들기 esbuild.config.js 하고 다음 코드를 추가합니다.

require('esbuild').build({
  // the entry point file described above
  entryPoints: ['src/index.js'],
  // the build folder location described above
  outfile: 'dist/bundle.js',
  bundle: true,
  // Replace with the browser versions you need to target
  target: ['chrome60', 'firefox60', 'safari11', 'edge20'],
  // Optional and for development only. This provides the ability to
  // map the built code back to the original source format when debugging.
  sourcemap: 'inline',
}).catch(() => process.exit(1))

그런 다음 코드 베이스에서 Firebase를 초기화합니다. 다음 코드는 진입점 파일에서 Firebase를 가져오고 초기화하고 Firestore Lite를 사용하여 "도시" 문서를 로드합니다.

// src/index.js
import { initializeApp } from 'firebase/app';
import { getFirestore, doc, getDoc } from 'firebase/firestore/lite';

const firebaseApp = initializeApp({ /* config */ });
const db = getFirestore(firebaseApp);

async function loadCity(name) {
  const cityDoc = doc(db, `cities/${name}`);
  const snapshot = await getDoc(cityDoc);
  return {
    id: snapshot.id,
    ...snapshot.data(),
  };
}

다음 단계는 것입니다 NPM 스크립트를 추가 실행 esbuild에. 열기 package.json 파일과에 다음 키 값 쌍을 추가 "scripts" 객체입니다.

  "scripts": {
    "build": "node ./esbuild.config.js"
  },

마지막으로, 확인 dist 빌드 폴더에 있습니다. 그것은라는 이름의 파일이 포함되어야 bundle.js 하여 번들 응용 프로그램과 의존성 코드가 포함되어 있습니다.

생산 esbuild 최적화에 대한 자세한 내용은 공식 문서를 참조 축약 및 기타 최적화에를 .