Rollup - node resolve 플러그인 (3)

3 minute read

이번에는 Rollup의 @rollup/plugin-node-resolve 플러그인의 사용방법에 대해 자세히 알아보겠습니다.



@rollup/plugin-node-resolve

...
import resolve from '@rollup/plugin-node-resolve';

// rollup basic config information
const basicCofig = {
  ...
  plugins: [
    resolve({
      /** 
       * package.json 내에서 스캔할 필드로, 진입점을 판별한다. 
       * 이 목록에 'browser'가 포함되어 있다면 'pkg.browser'에 지정된 재정의가 사용된다. 
      */
      mainFields: ['module', 'main'], // [기본]: ['module', 'main']

      /** 
       * .js 파일로 빌드하려는 모든 파일
       * Default: [ '.mjs', '.js', '.json', '.node' ]
      */
      extensions: ['.mjs', '.js', '.jsx', '.json'],

      /** 
       * 내장 모듈을 선호하는지 (예 :`fs`,`path`) 또는 같은 이름을 가진 로컬 모듈 
       * Default: true
      */
      preferBuiltins: false,

      /** 
       * 이 경로에서 chroot와 같은 모듈 검색을 잠급니다. 
       * 이 경로 외부에 정의된 모듈은 외부로 표시됩니다 
       * Default: '/'
      */
      jail: '/my/jail/path',

      /**
       * 하나 이상의 항목과 일치하는 모듈에 모듈 검색을 잠그려면 문자열 및 '/' 또는 정규식 배열로 설정하십시오. 
       * 항목과 일치하지 않는 모듈은 외부로 표시됩니다.
       * Default: null
       */
      only: ['some_module', /^@some_scope\/.*$/]

      /**
       * true 인 경우 해결 된 파일을 검사하여, 파일이 ES2015 모듈인지 확인하십시오.
       * Default: false
       */
      modulesOnly: true,

      /**
       * 종속성에서 패키지를 가져 오는 경우 동일한 모듈을 여러 번 번들링하지 못하게하는 
       * 루트의 node_modules로 이러한 모듈을 강제로 해결하십시오.
       * Default: []
       */
      dedupe: ['react', 'react-dom'],

      /** 
       * 일부 package.json 파일에는 "브라우저"필드가 있습니다.
       * 브라우저에 번들로 묶는 사람들을 위해 로드할 대체 파일의 경우 
       * 이 옵션을 사용하거나 "mainfields"옵션에 "browser"를 추가하십시오. 
       * 그렇지 않으면 pkg.browser가 무시됩니다.
       * Default: false
      */
      browser: true,

      /**
       * node-resolve로 전달되어야하는 추가 옵션
       */
      customResolveOptions: {
        moduleDirectory: 'js_modules'
      },

      /** 
       * [더 이상 사용되지 않음]
       * 가능하면 "mainFields"를 사용하고 대신 ES6 모듈에 "module"필드를 사용하십시오. 
      */
      module: true, // [기본]: true

      /**
       * [더 이상 사용되지 않음]
       * 가능하면 "mainFields"를 사용하고, 가능하다면 "jsnext: main"을 사용하세요. 
       * 타사 라이브러리에서 ES6 모듈을 가리키는 레거시 필드, "pkg.module"을 위해 더 이상 사용되지 않습니다.
      */
      jsnext: true, // [기본]: false

      /**
       * [더 이상 사용되지 않음]: 
       * ES6 모듈이 아닌 경우에도 "main"필드 또는 index.js를 사용하십시오.
       * (CommonJS에서 ES6로 변환해야 함)
      */
      main: true, // Default: true
    })
  ]
}



@rollup/plugin-commonjs 를 사용할 경우

node_modules 폴더에있는 대부분의 패키지는 JavaScript 모듈이 아닌 레거시 CommonJS 일 수 있으므로@rollup/plugin-commonjs 를 사용해야합니다.

...
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'main.js',
  output: {
    file: 'bundle.js',
    format: 'iifs',
    name: 'MyModule'
  },
  plugins: [
    resolve(), // 기본 세팅 사용
    commonjs() // rollup-plugin-commonjs 사용
  ]
}



Built-ins(내장) 문자 해결 (예: fs)

이 플러그인은 built-ins를 해결하지 않습니다. (예: fs) built-ins를 해결해야하는 경우, 로컬 모듈을 설치하고 preferBuiltins를 false로 설정하거나 이러한 메소드의 Stub된 버전을 제공하는 rollup-plugin-node-builtins와 같은 플러그인을 설치할 수 있습니다. built-ins에 대한 경고를 끄려면, built-ins 옵션을 externals 옵션에 추가할 수 있습니다.

import resolve from '@rollup/plugin-node-resolve';
import builtins from 'builtn-modules';

export default {
  input: 'main.js',
  output: {
    file: 'bundle.js',
    format: 'iifs',
    name: 'MyModule'
  },
  plugins: [resolve()],
  external: builtins,
}
  • getPackageInfoForId는 (moduledId: sttring) => PackagedInfo
  • 지정된 모듈이 포함 된 패키지에 ㄷ한 메트 데이터가 있는 개체를 반한홥니다.
PackageInfo에는 다음 필드가 있습니다.
  • package.json: 패키지의 package.json 파일
  • packageJsonPath: package.json 파일의 경로
  • root: 패키지의 루트 디렉터리
  • resolvedMainField: 분석 중에 사용된 기본 필드 (mainFields 옵션 참조)
  • browserMappedMain: 브라우저 맵이 모듈의 진입점을 해결하는데 시용되었는지 여부
  • resolvedEntrypoint: mainFiedls 구성 및 브라우저 맵핑과 관련된 해결된 진입점이 모듈을 가리킵니다.

이 오브젝트는 resove hook 중에 채워지므로 플러그인은 resove 후 실행되는 hook에 존재하는 이 정보만 의존해야 합니다.

다른 플러그인 사용하기

getPackageInfoForId는 rollup plugin에 필요한 다른 hook와 함께 플러그인 오브젝트에 메소드로 노출됩니다.

import resolve from '@rollup/plugin-node-resolve';
const resolve = resolve();

export default {
    input: 'main.js',
    output: {
      file: 'bundle.js',
      format: 'iifs',
      name: 'MyModule'
    },
    plugins: [
      resolve(),
      // 사용자 정의 플러그인
      {
        transform(code, id) {
          // 이 모듈 ID에 대한 패키지 정보를 얻습니다.
          const info = resolve.getPackageInfoForId(id);

          // buffer shim이면 아무것도 반환하지 않습니다.
          if (info.packageJson.name === 'buffer') {
            return '';
          }

          return code;
        }
      }
    ],
}



독립형 플러그인을 작성하는 경우

buildStart 후크에 제공된 구성에서 플러그인 오브젝트를 가져와서 액세스 할 수 있습니다.

  const sample = function () {
    let nodeResolvePlugin;

    function getPackageInfoForId(id) {
      if (!nodeResolvePlugin) return;

      if (!nodeResolvePlugin.getPackageInfoForId) return;

      return nodeResolvePlugin.getPackageInfoForId(id);
    }

    return {
      buildStart (options) {
        nodeResolvePlugin = options.plugins && options.plugins.filter(p => p.name === 'node-resolve')[0];
      },
      transform (code, id) {
        const info = getPackageInfoForId(id);
        // ...
      }
    }
  }

Tags:

Categories:

Updated:

 

 

Leave a comment