Rollup - 전단 모듈 화 패키지 도구 입문

Rollup. js 전단 모듈 화 패키지 도구 입문
Rollup. js 가이드, 입문 가이드
개념: Rollup. js 가 무엇 입 니까?
가장 직접적인 해석 은 Rollup 전단 모듈 화 된 포장 도구 로 모듈 파일 을 명령 이나 rollup.config.js 설정 파일 에 따라 여러 모듈 파일 을 하나의 파일 로 포장 한 다음 HTML 탭 을 통 해 이 결과 파일 을 가 져 오 면 코드 를 최소 화하 고 사용 되 지 않 은 함수 나 변 수 를 자동 으로 걸 러 냅 니 다.

모듈 이 무엇 입 니까?모듈 을 왜 사용 합 니까?모듈 은 하나의 js 파일 에 해당 하 며 단일 기능 이나 하나의 완전한 기능 을 한 곳 에 집중 시 키 고 사용 할 때 이 모듈 을 직접 도입 하면 됩 니 다. 따라서 이 모듈 의 함수 가 어떻게 실현 되 는 지 에 관심 을 가지 지 않 고 이 모듈 이 어떤 기능 을 실현 하 는 지 에 만 관심 을 가 져 야 합 니 다.예 를 들 어 (아래 코드 예제 에서 간단 한 모듈 사용 을 보 여 주 었 습 니 다)

//       ，      
import dictionary from './dictionary.js';
//   {}           
import { extractWords } from './string-utils.js';

//    export            ，
//              import         spellcheck  
export default function spellcheck ( text ) {
    //      string-utils    extractWords  
    var words       = extractWords( text );
    var mistakes    = [];

    words.forEach( function ( word ) {
        //      dictionary   dictionary  
        if ( !dictionary.contains( word.text ） ） {
            mistakes.push({
                start: word.start,
                end: word.end,
                suggestions: dictionary.getSuggestions( word.text )
            });
        }
    });

    // ... //
}

// PS:     ，      AMD        ， CMD

-
상기 방식 의 호출 을 통 해 우 리 는 더 이상 Rollup 과 dictionary 모듈 안의 string-utils 텍스트 를 어떻게 처리 하 는 지, 그리고 extractWrods 의 데이터 가 어디서 나 왔 는 지, 또는 그들의 실현 원리 와 사용 하 는 알고리즘 이 어떤 지 에 관심 을 가 질 필요 가 없다. 우 리 는 이러한 인터페이스 가 무엇 에 사용 되 는 지 에 만 관심 을 가 져 야 한다.문제 가 생기 면 우 리 는 어디에서 위 치 를 정 해 야 합 니까?

모듈 화가 우리 에 게 가 져 다 준 좋 은 점

코드 를 다시 사용 할 수 있 습 니 다. 모듈 화 를 통 해 단일 기능 을 하나의 파일 에 집중 시 킬 수 있 기 때문에 우리 가 사용 할 때 이 모듈 만 도입 하면 됩 니 다. 어떠한 이식 이나 수정 도 하지 않 고 한 번 에 여러 번 작성 하 는 목적 을 달성 할 수 있 습 니 다.

유지 가능성 은 문제 가 발생 하거나 코드 를 수정 해 야 할 때 모듈 을 목표 로 포 지 셔 닝 을 할 수 있 고 유지 하기 쉽다.

테스트 가능 성 은 전체 모듈 이 하나의 파일 에 있 기 때문에 우 리 는 이 기능 을 편리 하 게 테스트 할 수 있다.

프로그래머 간 의 협력 과 조율 에 도움 이 되 고 여러 사람 이 이 모듈 을 사용 할 때 조율 과 합작 이 더욱 쉽다. 이 기능 은 모두 한 모듈 에 있 기 때문에 모두 가 이 모듈 을 필요 로 할 때 나 수정 이 필요 할 때 이 파일 을 수정 하여 다른 프로그래머 에 대한 영향 을 줄 여야 한다.

버그 감소: 모듈 화 를 사용 하면 이름 충돌 등 일련의 문 제 를 걱정 하지 않 고 안심 하고 코드 를 작성 할 수 있 습 니 다.

Rollup 으로 첫 번 째 패키지 데모 만 들 기

Rollup 을 설치 하면 간단 합 니 다. 기계 에 nodeJS 와 npm 를 설치 한 것 을 보증 하 는 토대 에서 아래 명령 을 사용 하면 됩 니 다 dictionary npm i rollup - g npm install rollup --global # or

rollup 테스트, rollup 명령 을 직접 입력 하여 설치 성공 또는 통과 여 부 를 확인 합 니 다 for short rollup --help / -h

데모 프로젝트 창설 rollup mkdir -p my-rollup-project/src

입구 파일 생 성: main. js cd my-rollup-project 다음 내용 을 입력 하 십시오.

//  foo    foo  
import foo from './foo.js';

//          ，                     
//    'main',        ES6     '      '
export default function () {
    console.log( foo );
}

입구 파일 을 만 드 는 데 의존 하 는 파일: foo. js touch src/main.js 는 다음 과 같은 내용 을 포함 합 니 다. touch src/foo.js

main. js 를 포장 하고 직접 출력 export default 48; // ES6 은 다음 과 같은 내용 을 출력 합 니 다.

var foo = 48;

function main () {
    console.log( foo );
}

export default main;

포 장 된 내용 을 지정 한 파일 에 출력 하고 인자 - o 또는 – output rollup src/main.js 를 사용 하여 이 명령 을 실행 한 후 위 에서 직접 출력 한 내용 은 bundle. js 파일 에 나타 납 니 다

또한 - f 또는 – format 명령 을 통 해 출력 할 수 있 는 형식 (- f cjs = comonJS, amd = AMD,...) rollup src/main.js -o bundle.js 을 지정 - f cjs 를 통 해 comonJS 형식 으로 출력 하면 다음 과 같은 내용 을 얻 을 수 있 습 니 다.

'use strict'

var foo = 48;

function main () {
    console.log( foo );
}

module.exports = main;

포 장 된 bundle. js 를 사용 하여 'node' 명령 을 통 해 들 어 갑 니 다. node 모드

node

//     require       
> var myBundle = require('./bundle.js');
> myBundle();

//     ：48

Rollup 설정 파일 rollup src/main.js -o bundle.js -f cjs 을 사용 하여 포장 절 차 를 줄 입 니 다.
이것 은 간단 한 예 입 니 다. 비교적 큰 프로젝트 가 명령 을 통 해 완성 되면 좀 번 거 로 워 집 니 다. 따라서 우 리 는 rollup 의 프로필 을 만 들 고 작성 함으로써 작업 절 차 를 줄 일 수 있 습 니 다. 또한 프로필 이 있 으 면 영원히 고생 할 수 있 습 니 다. 매번 명령 을 입력 하지 않 아 도 됩 니 다.

rollup.config.js 내용 이나 쓰기 양식

export default {
    //       ，       bundle.js    
    entry: './main.js', 

    //           ，  ： rollup src/main.js -o bundle.js -f cjs  '-f cjs'  
    format: 'cjs', 

    //          ，     '-o bundle.js'  
    dest: 'bundle.js'
}

프로필 을 작성 한 후 프로젝트 디 렉 터 리 에서 rollup.config.js 명령 을 직접 사용 하여 완성 하기 전에 여러 명령 을 통 해 완성 할 수 있 는 작업 입 니 다. rollup -c rollup 명령 을 통 해 사용 할 프로필 을 지정 하고 지정 하지 않 으 면 기본 설정 을 사용 합 니 다.따라서 기본 설정 파일 을 수정 하지 않 은 상태 에서 아래 명령 을 사용 하여 포장 작업 을 완성 할 수 있 습 니 다.-c

기본 프로필 이름 을 수정 하고 rollup.config.js 을 통 해 지정 rollup -c --config

rollup 플러그 인의 사용: json 플러그 인, rollup --config rollup.config.dev.js롤 업 플러그 인

rollup 플러그 인 을 통 해 JSON 파일 에서 데 이 터 를 가 져 옵 니 다 (예: package. json) package. json 은 내용 을 포함 합 니 다. 예 를 들 어 (이 항목 의 항목 이름과 버 전 정보)

{
    "name": "my-rollup-project",
    "version": "1.0.0"
}

rollup 의 json 플러그 인 을 설치 합 니 다. 이것 은 프로젝트 디 렉 터 리 에서 실행 rollup --config rollup.config.prod.js 또는 약자: rollup-plugin-json

설치 후 package. json 내용 에 변화 가 있 습 니 다. 다음 과 같 습 니 다.

{
    "name": "my-rollup-project",
    "version": "1.0.0",
    "devDependencies": {
        "rollup-plugin-json": "^2.0.2"
    }
}

json 플러그 인 을 사용 하면 main. js 에서 import 를 통 해 package. json 의 데 이 터 를 도입 하고 사용 할 수 있 습 니 다

// src/main.js
import { version } from "../package.json"

export default function () {
    console.log( 'current version is ' + version );
}

설정 파일 수정 npm install --save-dev rollup-plugin-json, 플러그 인 설정 항목 추가

//   json  
import json from 'rollup-plugin-json';

export default {
    entry: 'src/main.js',
    format: 'cjs',

    //        ，          ，  ：[ json(), a(), b() ...]
    plugins: [ json() ], 

    dest: 'bundle.js'
};

마지막 으로 npm i -D rollup-plugin-json 포장 을 통 해 다음 과 같은 결 과 를 얻 었 다.

'use strict'

var version = '1.0.0';

function main () {
    console.log( 'current version is ' + version );
}

module.exports = main;

rollup 플러그 인의 사용: Babel 플러그 인, rollup.config.jsBabel 플러그 인, 현재 브 라 우 저가 지원 하지 않 는 JS 기능 사용

바벨 장 착: rollup -c

프로필 에 추가 rollup-plugin-json

//     
import json from 'rollup-plugin-json';
import babel from 'rollup-plugin-babel';

export default {
    entry: 'src/main.js',
    format: 'cjs',
    plugins: [ json(), babel() ],
    dest: 'bundle.js'
};

바벨 을 사용 하여 코드 를 컴 파일 하기 전에 설정 이 필요 합 니 다. 이 설정 파일 은 src / 디 렉 터 리 에서 만들어 야 합 니 다 npm i -D rollup-plugin-babel 내용:

{
    "presets": ["es2015-rollup"]
}

이전 설정 을 거 친 후에 설치 해 야 합 니 다 rollup.config.js touch src/.babelrc

상기 절차 가 완 료 된 후에 우 리 는 파일 에서 ES 2015 특성 을 사용 할 수 있다. 예 를 들 어

// src/main.js
import { version } from '../package.json';

const message = `current version is ${version}`;

export default () => console.log( message );

마지막 으로 사용 babel-preset-es2015-rollup 을 포장 하여 다음 과 같은 결 과 를 얻 었 다.

// bundle.js
'use strict';

var version = '1.0.0';

var message = 'current version is ' + version;

var main = (function () {
    console.log( message );
});

module.exports = main;

총화

//     Babel     ES2015               ，Babel         ：

// 1.   
npm i -D rollup-plugin-babel  

// 2.  rollup          ，          'plugins'           'babel()'
import babel from 'rollup-plugin-babel';
import json from 'rollup-plugin-json';

export default {
    ...
    // json    ：npm i -D rollup-plugin-json
    "plugins": [ babel(), json() ],
    ...
}

// 3.      Babel     ： src/.babelrc
{
    "presets": [ "es2015-rollup" ] //    rollup  es2015
}

// 4.          es2015-rollup，       Babel     
npm i -D babel-preset-es2015-rollup

// 5.           ，               ，        ES2015    ，            
// src/main.js
import { version } from '../package.json';

// ES2015   ，    ，        ，${}         
const message = `current version is ${version}`;

//         ，    export defualt function () { console.log( message ); }
export default () => console.log( message );

// 6.               ：bundle.js
//           rollup.config.js            
rollup -c

// bundle.js
'use strict';

var version = "1.0.0";

var message = "current version is " + version;

//               ，      
var main = (function () {
    console.log( message );
});

module.exports = main;

npm i -D babel-preset-es2015-rollup 를 통 해 사용 rollup -c

프로젝트 디 렉 터 리 생 성 npm

package. json 을 만 들 고 위 치 는 프로젝트 루트 디 렉 터 리 에 저 장 됩 니 다. 즉 Rollup 설정 정보 와 다른 데이터 등 을 저장 합 니 다. 일부 속성 npm-rollup mkdir -p npm-rollup-project/src 을 미리 설정 하고 원 하 는 속성 을 package. json 에 미리 설정 할 수 있 습 니 다. 예 를 들 어

{
    "name": "npm-rollup-project",
    "version": "1.0.0"
}

초기 화, npm-rollup-project/ 명령 으로 초기 화 할 수 있 으 며, package. json 에 추가 속성 cd npm-rollup-project 설정 완료 후 touch package.json 내용 은 다음 과 같 습 니 다.

{
    "name": "npm-rollup-project",
    "version": "1.0.0",
    "main": "index.js",   //      
    "scripts": {
        "test": "echo ...."
    },
    "keywords": "rollup", //         
    "author": "lizc",
    "license": "ISC",
    "description": ""
}

준비 작업 이 끝나 면 프로젝트 설치 npm init 를 시작 할 수 있다 npm init

입구 파일 을 만 들 고 ES 2015 모듈 표준 을 사용 하 며 ES 2015 의 새로운 기능

// src/main.js

import foo from './foo.js';

export default function () {
    console.log( foo );
}

을 사용 할 수 있 습 니 다.

생 성 package.json 의존 파일 rollup

// src/foo.js

export default 45;

npm install --save rollup 에서 새 스 크 립 트 만 들 기

"scripts": {
    // ... others

    "build": "rollup src/main.js --output bundle.js"
}

실행 main.js 중 foo.js 스 크 립 트 package.json 를 컴 파일 하여 포장 한 스 크 립 트 파일 package.json

var foo = 45;

function main() {
    console.log( foo );
}

export default main;

총화

//   npm     ，    
// 1.   package.json    ，    npm init，package.json         
{
    "name": "...",
    "version": "...",
    "main": "..js",
    "scripts": {
        //           ，     ，  ：
        "build": "rollup src/main.js --output bundle.js"
    },
    //          
}

// 2.      rollup，                  "node_modules"   
npm install --save rollup

// 3.         main.js，       foo.js         

// 4.  package.json  "scripts"     ，         ，  ：
"scripts": {
    "build": "rollup src/main.js --output bundle.js"  //     'build'       
}    

// 5.         ，run        "scripts"         
npm run build

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Javascript가 Crontab 표현식의 유효성 여부를 판단하는 상세 정보

Javascript는 Crontab 표현식의 유효성 여부를 판단합니다. 그동안 Quartz 작업 스케줄링을 하면서 사용한 Crontab 표현식으로 이루어졌습니다.Crontab은 프런트엔드 페이지에서 입력한 매개변수로...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Rollup - 전단 모듈 화 패키지 도구 입문

좋은 웹페이지 즐겨찾기