@pika/pack-우수한 npm 패키지를 발표합니다.

주: 이 글은 pika.dev에 최초로 발표되었다.
만약 최근에 npm에 패키지를 발표했다면, 현대 구축 과정에서 얼마나 많은 작업을 해야 하는지 알 수 있습니다.Transfile JavaScript, TypeScript 컴파일, ESM 모듈 구문 변환js, 가방을 설정합니다.제이슨 리스트...이것은 단지 가장 기본적인 것이다.
그럼 웹 브라우저와 패키지는요?네 거야package optimized for them?사용자는 UNPKG 에서 가방을 불러올 수 있습니까?여기에는 VSCode 및 TypeScript 사용자type definitions가 포함됩니까?그것stripped of all unnecessary files은 가능한 한 작습니까?사용자는 이러한 최적화에 관심을 가지지만, 더 많은 지식, 설정, 도구, 시간과 노력이 있어야만 정확할 수 있습니다.

@pika/pack은 놀라운 패키지를 쉽게 구축할 수 있습니다.

이해하기 쉽다⚡️ 사전 구성된 플러그인을 사용하여 전체 패키지를 구성합니다.

유연했어🏋️‍♀️ 사용자의 요구에 맞는 플러그인과 최적화를 선택하십시오.

전면적⚛️ 코드, 자산, 패키지를 처리하겠습니다.json 설정.

패키지 구축 파이프

@pika/pack 미리 구성된 플러그인을 연결하여 패키지를 구축하고 최적화합니다.플러그인은 Babel와Rollup 등 이미 유행하는 도구를 봉인했고 그 중에서 옵션은 npm에 최적화되었다.이것은 @pika/pack으로 가방을 구축할 수 있도록 합니다. 너무 많은 설정을 할 필요가 없습니다.
@pika/pack은 패키지를 만들고 설정할 수도 있습니다.가방 제이슨 리스트.
이는 @pika/pack 전체 패키지: 코드, 자산 심지어 패키지를 구축했기 때문이다.제이슨 리스트.전체 소프트웨어 패키지를 구축함으로써 최종적으로 완전하게 구축된 pkg/ 디렉터리를 얻을 수 있습니다.'main','module','umd:main','types','unpkg'같은 입구점, 심지어'sideEffects','files'같은 고급 옵션은 구축 플러그인에 의해 처리됩니다.
쉬운 시작 방법:

// 1. Install @pika/pack!
$ npm install -g @pika/pack
// 2. Add this to your package.json manifest:
"@pika/pack": {"pipeline": []},
// 3. Run @pika/pack!
$ pack build

😎 🆒
그럼 이제 어떡하지?빈 파이프를 사용하여 실행pack build하면 빈 패키지가 제공됩니다.이것은 그다지 유용하지 않다.
우선, 다음은 우리가 가장 좋아하는 다섯 가지@pika/pack입니다.

1. 기본 발표 Modern, ES2018 JavaScript(1줄)

"@pika/pack": {
    "pipeline": [
        ["@pika/plugin-standard-pkg", {"exclude": ["__tests__/**/*"]}]
    ]
}

대부분의 패키지에서 사용할 첫 번째 플러그인은 @pika/plugin-standard-pkg 입니다.이것은 우리의 표준"source" builder입니다. 최신 ES2018 언어 규범에 따라 자바스크립트와 TypeScript 원본 코드를 구축합니다. 기본적으로 TypeScript를 지원하며, 로컬.babelrc에 있는 사용자 정의 Babel 플러그인을 자동으로 사용합니다. 이 플러그인은 Babel 내부에서 지원합니다.
이것은 우리의 남은 파이프라인에 표준적인 ES2018 목표를 제공했다.이점: 일부 사용자는 현대 JavaScript를 지원할 수 있고 ES2018 릴리스를 직접 활용하여 더 작고 더 빠르고 비대하지 않은 패키지를 구현할 수 있습니다.

2. 게시 노드.js 및 웹 최적화 버전 (각 1행)

"@pika/pack": {
    "pipeline": [
        ["@pika/plugin-standard-pkg"],
        ["@pika/plugin-build-node"],
        ["@pika/plugin-build-web"]
    ]
}

현대 ES2018 구축을 만든 후에 노드를 추가하는 것은 매우 간단해졌다.js와 웹은 가방에 최적화되어 있습니다.@pika/plugin-build-node 노드가 전송됩니다.jsready 버전은 지원되는 노드에서 실행할 수 있습니다.js 버전.@pika/plugin-build-web은(는) 번들에 최적화된 최신 ES 모듈(ESM) 릴리스를 구축하고 ESM 구문을 지원하는 모든 브라우저에서 실행되도록 컴파일합니다.
이 두 플러그인은 모두 내부에서 집합을 사용하지만, 귀속기 논리를 설정할 필요가 없습니다.세 줄의 JSON만 있으면 두 가지 가장 유행하는 JS 플랫폼에 대해 충분히 최적화된 패키지를 얻을 수 있다.@pika/pack 당신의 가방, 당신의 가방을 구축했기 때문입니다.json 목록은 자동으로 "main", "module", "esnext"입구점을 설정합니다.

3, TypeScript 정의 자동 생성(1줄)

"@pika/pack": {
    "pipeline": [
        ["@pika/plugin-standard-pkg"],
        ["@pika/plugin-build-node"],
        ["@pika/plugin-build-web"],
        ["@pika/plugin-build-types"]
    ]
},

@pika/pack 플러그인으로 인해 패키지당 .d.ts TypeScript 정의 파일을 자동으로 가져옵니다.JavaScript를 작성하고 있는 경우에도 이 플러그인은 TypeScript를 사용하여 JavaScript와 JSDoc에서 자동으로 유형 정의를 생성합니다!

@pika / 플러그인 구축 형식 4, WASM 발표!이성적이거나, 녹슬거나, C++, 또는...(1-2 줄)

"@pika/pack": {
    "pipeline": [
        ["@pika/plugin-wasm-assemblyscript"],
        ["@pika/plugin-wasm-bindings"]
    ]
},

파이프 개념이 간단하고 유연하다.패킷 소스 코드는 JavaScript가 필요하지 않을 정도로 유연합니다.

- BuckleScript

를 통해 Reason 또는 OCaml을 ES2018 JavaScript로 컴파일

@pika/plugin-source-bucklescript - AssemblyScript

를 통해 TypeScript를 WASM으로 컴파일

@pika/plugin-wasm-assemblyscript - Emscripten(출시 예정!)을 통해 C/C++를 WASM으로 컴파일합니다.

@pika/plugin-wasm-emscripten - 생성된 WASM에 간단한 JavaScript 바인딩을 추가합니다.

@pika/plugin wasm 귀속 5. 패키지 자동 강화(1줄)

"@pika/pack": {
    "pipeline": [
        ["@pika/plugin-standard-pkg"],
        ["@pika/plugin-build-node"],
        ["@pika/plugin-simple-bin", {"bin": "my-cli"}]
    ]
}

플러그인을 구축하면 매우 흥미로운 방식으로 기존의 구축을 강화할 수 있다.현재 우리가 가장 선호하는 향상된 기능은 간단한 CLI 패키지를 모든 패키지에 주입하고 패키지를 구성하는 것입니다.json은 자동으로 그것을 가리킨다.
우리는 @pika/pack을 사용하여 @pika/pack을 구축합니다. 이 플러그인을 전문적으로 사용합니다. 가방이 없습니다.json 설정과 설정이 번거롭습니다.
우리는 이 포장 개념이 어떤 가능성을 가지고 있는지 보고 싶어 한다. 특히 CLIs: 고장이 났을 때 자동으로 프로그램을 다시 시작하고 실행 후 패키지 업데이트를 검사하며 사용 상황 통계를 기록한다...@pika/plugin-simple-bin

명령줄 인터페이스 추가 패키지 게시

the possibilities are endless!
발표 패키지는 구축 패키지처럼 간단해야 합니다.따라서 우리는 (자신이 묘사한'더 좋은 npm 발표') 중에서 우리가 가장 좋아하는 부분을 가지고 들어갈 것이다 .publish 명령을 사용하면 생성된 패키지를 어떻게 발표할지 걱정할 필요가 없습니다.최고급 프로젝트pack publish를 실행하면 @pika/pack은 새 버전을 편집하고 패키지를 발표하는 과정을 안내합니다.
새 패키지를 바로 볼 수 있도록 끝에 편리한 np 를 포함할 수도 있습니다.

@ 쥐토끼/가방 오늘은 "Pika/pack"!

npm install -g @pika/pack

기다리지 말고 다음 패키지(또는 2019년 업그레이드될 수 있는 이전 패키지)에서 시도하십시오unpkg.com.네가 이렇게 할 때,
JavaScript 생태계를 발전시키는 프로젝트입니다.Pika의 임무는 현대 자바스크립트가 npm에서 현대 소프트웨어 패키지를 찾기, 발표, 설치, 사용하기 쉽도록 하는 것이다.@pika/pack이 이 목표를 향해 한 걸음 더 나아갈 수 있기를 바랍니다.

@pika/pack 사용 항목

@pika/pack - 약속에 기반한 유연한 React 데이터 로더.

- 모든 기능의 연결!

react-async - NodeJS 프레임워크의 모든 기능을 제공합니다.

hookuspocus - REST API를 GraphQL로 변환합니다.

foundationjs - 사용자 정의 속성을 정의하는 방식은 사용자 정의 요소를 정의하는 방식과 같습니다.

graphql-rest-proxy & custom-attributes - 네, 저희는 심지어 @pika/pack부터 @pika/web까지🤯

그리고 수백 개!use @pika/pack

포장에 @pika/pack을 사용하셨습니까?우리는 당신의 소포를 목록에 추가할 것입니다!