Rollup - node resolve 플러그인 (3)
이번에는 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);
// ...
}
}
}
Leave a comment