Rollup을 사용하여 어디서나 사용할 수 있는 JavaScript 라이브러리 작성
우리는 다음과 같은 용례를 만족시켜야 한다.
<script> 레이블<script> 레이블:<html>
<head>
<script src="scripts/my-library.min.js"></script>
</head>
<body>
<div id="app" />
<script>
myLibrary.helloWorld();
</script>
</body>
</html>
define(["my-library"], function (myLibrary) {});
// or
define(function (require) {
var myLibrary = require("my-library");
});
import { helloWorld } from "my-library";
helloWorld();
const myLibrary = require("my-library");
myLibrary.helloWorld();
// or
const { helloWorld } = require("my-library");
helloWorld();
import lib from 'library'; lib.sayHello(); 를 호출할 수 없습니다. 이것은 완전히 의도적인 것입니다.우리는 소비자들이 트리가 진동하면 작업을 완성할 수 있고 최종 응용 프로그램을 묶을 때 코드를 없애기를 바란다.현대 귀속기를 사용하는 응용 프로그램에서 소비 웹 응용 프로그램도 배치에 사용되는 귀속을 생성할 수 있음을 기억하십시오. 가능한 한 작게 하기를 바랍니다. 따라서 우리는 소비자들이 응용 프로그램에서 사용하지 않은 코드를 포함하지 않도록 할 것입니다.이 모든 것을 실현하기 위해서 우리는 총결산을 사용할 것이다.js.Rollup은 매우 빠르기 때문에(although not the fastest 최소한의 설정만 필요하고 편리한 플러그인 시스템을 통해 우리가 필요로 하는 모든 것을 지원할 수 있다.
라이브러리를 작성한 후에는 Rollup을 사용하여 다음 세 가지 형식으로 코드를 내보냅니다.
첫 번째 단계는 프로젝트를 만드는 것입니다.
$ mkdir my-library
$ cd my-library
$ npm init -y
분명히 우리는 총결산이 필요하다.
$ npm install rollup --save-dev
$ npm install @babel/core @babel/preset-env --save-dev
$ npm install @rollup/plugin-babel rollup-plugin-terser --save-dev
import fn from './fn' 대신 import fn from './fn/index.js' 를 작성할 수 있도록 합니다. 물론, node modules 디렉터리의 모듈도 사용할 수 있습니다. (우리는 여기서 하지 않습니다.)$ npm install @rollup/plugin-node-resolve --save-dev
"dependencies": {},
"devDependencies": {
"@babel/core": "^7.11.6",
"@babel/preset-env": "^7.11.5",
"@rollup/plugin-babel": "^5.2.1",
"@rollup/plugin-node-resolve": "^9.0.0",
"rollup": "^2.28.2",
"rollup-plugin-terser": "^7.0.2"
},
$ mkdir src
$ touch .babelrc.json
$ touch rollup.config.js
{
"presets": [["@babel/env", { "modules": false }]]
}
import { nodeResolve } from "@rollup/plugin-node-resolve";
import { terser } from "rollup-plugin-terser";
import babel from "@rollup/plugin-babel";
import pkg from "./package.json";
rollup.config.js는 두 가지 일을 할 것이다.UMD의 경우 코드를 가져와 처리하고 Babel(Transfile)과terser(minify)를 통해 실행한 다음 UMD 파일로 내보냅니다.
{
// UMD
input: "src/index.js",
plugins: [
nodeResolve(),
babel({
babelHelpers: "bundled",
}),
terser(),
],
output: {
file: `dist/${pkg.name}.min.js`,
format: "umd",
name: "myLibrary",
esModule: false,
exports: "named",
sourcemap: true,
},
},
{
input: ["src/index.js"],
plugins: [nodeResolve()],
output: [
{
dir: "dist/esm",
format: "esm",
exports: "named",
sourcemap: true,
},
{
dir: "dist/cjs",
format: "cjs",
exports: "named",
sourcemap: true,
},
],
},
주의
exports: "named" 옵션은 모든 설정에 있습니다. a longer explanation in rollup’s documentation 본질적으로 이것은 롤러가 기본적으로 내보내는 것이 아니라 이름을 붙여서 내보내는 것을 사용합니다.긴 말은 하지 마라. 이것은 가능한 한 광범위한 호환성을 허용하고 나무의 진동을 일으킨다.만약 linter를 사용한다면, 기본 내보내기 대신 이름 내보내기를 지원하도록 설정하십시오. (이것은 프로그램에 적용되지 않으며, 라이브러리에만 적용되며, 기본 내보내기, 심지어 혼합 프로그램의 기본/이름 내보내기를 사용하면 충분히 가능합니다.)완전한 총결산 문건은 다음과 같다.이름은 소포에서 꺼냈기 때문이다.json, 입구점이 src/index라면 사실상 이 파일을 원래대로 사용할 수 있습니다.js, UMD 모듈의 출력에 해당하는 이름을 설정합니다.
import { nodeResolve } from "@rollup/plugin-node-resolve";
import { terser } from "rollup-plugin-terser";
import babel from "@rollup/plugin-babel";
import pkg from "./package.json";
const input = ["src/index.js"];
export default [
{
// UMD
input,
plugins: [
nodeResolve(),
babel({
babelHelpers: "bundled",
}),
terser(),
],
output: {
file: `dist/${pkg.name}.min.js`,
format: "umd",
name: "myLibrary", // this is the name of the global object
esModule: false,
exports: "named",
sourcemap: true,
},
},
// ESM and CJS
{
input,
plugins: [nodeResolve()],
output: [
{
dir: "dist/esm",
format: "esm",
exports: "named",
sourcemap: true,
},
{
dir: "dist/cjs",
format: "cjs",
exports: "named",
sourcemap: true,
},
],
},
];
우리는 이렇게 서류를 배치해야 한다.
src
├── goodbye
│ ├── goodbye.js
│ └── index.js
├── hello
│ ├── hello.js
│ └── index.js
└── index.js
// src/index.js
export { default as hello } from "./hello";
export { default as goodbye } from "./goodbye";
// src/hello/index.js
export { default } from "./hello";
// src/hello/hello.js
export default function hello() {
console.log("hello");
}
// src/goodbye/index.js
export { default } from "./goodbye";
// src/goodbye/goodbye.js
export default function goodbye() {
console.log("goodbye");
}
“scripts”: {
“build”: “rollup -c”,
“dev”: “rollup -c -w”
},
가방에 세 개의 값을 정의할 것입니다.json:
npm에 무엇을 포장할지 알려주는 파일 옵션(npm pack으로 테스트할 수 있음), CJS 모듈을 가리키는 메인 옵션, 모듈 옵션, 표준 옵션은 아니지만 ESM 모듈의 표준 옵션이 되었다.
// package.json
...
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
...
files: [
"dist"
]
라이브러리를 구축하려면 실행
npm run build만 하면 개발 과정에서 사용할 수 있다npm run dev.npm pack 테스트를 사용하여 내보낼 수 있습니다.테스트 라이브러리
스크립트 태그를 사용하여 HTML 파일을 만들고 브라우저에서 열기만 하면 됩니다.콘솔에서 인쇄된 단어 "Hello"를 볼 수 있습니다.
<html>
<head>
<script src="dist/my-library.min.js"></script>
</head>
<body>
<script>
myLibrary.hello();
</script>
</body>
</html>
www
├── index.html
└── scripts
├── app.js
├── my-library.min.js
└── require.js
index.html
<html>
<head>
<script data-main="scripts/app.js" src="scripts/require.js"></script>
</head>
<body></body>
</html>
// app.js
requirejs.config({
baseUrl: "scripts",
});
requirejs(["my-library.min"], function (myLibrary) {
myLibrary.hello();
});
my-library.min.js은 https://unpkg.com/에서 얻을 수 있습니다.라이브러리 디렉터리 이외의 노드에서 js 파일을 만들고 my library 디렉터리(dist 폴더가 아님!)를 가리키며 모듈을 요청합니다.
const myLibrary = require("../my-library");
myLibrary.hello(); // hello
myLibrary.goodbye(); // goodbye
React 애플리케이션과 같이 웹팩을 사용하는 웹 애플리케이션에서
$ npx create-react-app my-library-cra
$ cd my-library-cra
"my-library": "../my-library/"
src/App.js에서는 hello 함수만 가져오고 호출합니다.import { hello } from "my-library";
hello();
yarn start React 프로그램을 실행하고 자바스크립트 컨트롤러를 열면 인쇄된 "Hello"를 볼 수 있습니다.이제 흔들림나무가 유효한지 확인하려면
yarn build을 실행하십시오.React 애플리케이션이 build 디렉토리에 번들로 묶여 배치됩니다.만약 파일에서 Hello 키워드를 검색한다면, js 파일에서 매우 길고 복잡한 이름이 있지만, 키워드 '안녕' 을 찾을 수 없습니다.이것은 웹 패키지가 필요한 코드만 도입했음을 나타낸다.라이브러리에서 이름 있는 내보내기를 사용했기 때문에 라이브러리 사용자는 쓰기 import myLibrary from 'my-library'; 를 할 수 없고, 패키지 전체를 잘못 가져올 수 있으며, 그 중 일부만 사용합니다.도움이 되었으면 좋겠습니다. 만약 당신이 평론에 어떤 문제가 있다면 저에게 알려 주십시오.
Reference
이 문제에 관하여(Rollup을 사용하여 어디서나 사용할 수 있는 JavaScript 라이브러리 작성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/arnaud/authoring-a-javascript-library-that-works-everywhere-using-rollup-1ck5텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
