👋🏻 소개하다.

Pixuim에서 우리는 각종 사이트를 위해 웹 패키지를 만드는 것을 자주 발견한다.
이것은 script 태그를 통해 통합한 다음 코드에 사용할 수 있는 간단한 패키지를 의미합니다. 예를 들어:

<script src="https://mycdn.a/latest/bundle.js"></script>
<script>
    pixiumPackage.helloWorld()
</script>

이 패키지를 개발하는 과정에서 우리는 모든 package.json 스크립트와 정보를 다시 만드는 것을 자주 발견한다.따라서 쉽게 설정할 수 있는 템플릿을 만들기로 했습니다.
이 글에서 우리는 우리가 어떤 도구를 사용했는지, 그리고 우리가 어떻게 이 슈퍼 템플릿을 만들었는지 볼 것이다!

🔧 사용된 도구

다음은 사용한 도구의 빠른 목록과 프로젝트에서 사용하는 빠른 설명입니다
공구.
묘사
사선
패키지 설치 처리
Npm
가방을 npm 등록표에 발표
타자 원고
강력한 유형 JavaScript
웹 패키지
typescript를 단일 JavaScript 라이브러리에 번들
눈이 쌓이다
테스트를 위해 핫 모듈 다시 로드
동시에
동시에 여러 명령 실행

🗄️ 관리 구조

현재 프로젝트의 폴더와 파일을 어떻게 관리하는지 알아보겠습니다

webpack-demo/
├── README.md
├── dist
├────...
├── node_modules
├────...
├── package.json
├── snowpack.config.js
├── src
├────...
├── test
├────...
├── tsconfig.json
├── webpack.config.js
└── yarn.lock

보시다시피 프로젝트에는 4개의 주요 폴더가 있습니다.
폴더
사용
거리
컴파일된 준비 게시 패키지 포함
노드 단위
프로젝트에 필요한 모든 npm 패키지
src
라이브러리의 원본 파일
테스트
패키지를 인용하여 실시간으로 테스트하는 인덱스 파일

🕸 웹 패키지

이 프로젝트에서 우리는 webpack와 ts-loader를 사용한다.Webpack는 브라우저에 공개된 라이브러리에 연결된 모든 내용에 사용되며 ts-loader 필요한 typescript를 처리합니다.
웹 패키지 설정에 대해 output:library 속성을 사용하여 공개 라이브러리의 이름을 지정합니다.
웹 패키지.배치하다.js

const path = require('path');

module.exports = {
    entry: './src/index.ts',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        // Define the package name
        library: 'pixiumPackage',
        libraryTarget: 'umd',
        globalObject: 'this',
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
};

즉, 다음과 같이 라이브러리에 액세스할 수 있습니다.

<script>
    pixiumPackage.myFunctionName()
    pixiumPackage.myClassName()
</script>

❄️️ 눈이 쌓이다

Snowpack는 최근에 Pixium에서 발견한 훌륭한 도구입니다.이것은 현대의 전단 구축 도구로 속도가 매우 빠르다!

이 프로젝트에서 스노우팩의 사용은 매우 간단하다.테스트 환경을 실시간으로 시각화하여 변경합니다.이것은 열 모듈 교체를 지원합니다. 이것은 웹 패키지가 변경될 때마다 새 패키지를 다시 컴파일하고 테스트 환경이 다시 불러온다는 것을 의미합니다.

적설배치하다.js

/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
    mount: {
        test: '/',
        dist: '/dist',
    },
    plugins: ['@snowpack/plugin-typescript'],
    install: [
        /* ... */
    ],
    installOptions: {
        installTypes: true,
    },
};

여기mount 파라미터가 가장 중요합니다.

test: '/',는 테스트 폴더를 웹의 루트 디렉터리로 마운트할 것임을 나타냅니다

dist: '/dist'는 디스켓 폴더를 /dist에 불러올 것이라고 밝혔다.이것은 우리가 디스트에서 스크립트를 요청할 수 있다는 것을 의미한다. 예를 들어 <script src="./dist/bundle.js"></script>

💻 저희 코드 공개하겠습니다.

이제 코드와 상수, 함수, 클래스를 어떻게 공개하는지 살펴봅시다.

라이브러리 접근 코드를 통과하려면 export 방법만 사용하십시오.예를 들면 다음과 같습니다.

/**
 * Say hello world in the console
 */
export const PixiumHello = () => {
    console.log(`hello world`)
}

우리는 아래의 방식으로 그것을 호칭할 수 있다.

<script>
pixiumPackage.PixiumHello()
</script>

또한 클래식 기능을 통해 DOM와 손쉽게 상호 작용할 수 있습니다.

// Set the inner text
document.getElementById("pixiumBanner").innerText = "Pixium Digital Pte Ltd";

🏁 결론

우리는 테스트에 편리하도록 아주 간단한 typescript 귀속과 HMR 시스템을 가지고 있다.
패치, 부차적인 프로그램, 주요 프로그램을 npm로 쉽게 전송할 수 있는 몇 가지 명령 단축 방식이 있다.
이 모든 것에 CDN을 더하면, 너는 너의 앞부분에 놀라운 빠른 라이브러리를 얻을 수 있다.
전면 환매

스킨 디지털 / typescript 패키지 템플릿

typescript 지원 웹 패키지

Typescript 패키지 템플릿

이 템플릿 파일에서 웹을 위한 아주 기본적인 typescript 패키지를 간단하게 소개합니다.
우리는 웹 패키지를 이용하여 브라우저에 가방을 공개합니다.

장치

다음 도구를 사용하여 dev 패키지를 설치합니다.

yarn

발전시키다

yarn start

라이브러리의 변경 사항을 컴파일하기 위해 웹 패키지를 시작합니다.
또한 snowpack을 시작하여 색인을 업데이트합니다.웹 패키지의 라이브러리가 컴파일되면 html이 테스트됩니다

짓다

yarn build

패키지 게시

npm cli에 로그인하지 않은 경우 먼저 로그인하십시오.

npm login

package.json에서 다음 줄을 삭제해야 합니다.

private: true,

패치 게시

yarn patch

미성년자 논문을 발표하다

yarn minor

발표 전문

yarn major

View on GitHub
PixUIM Digital - 기술 및 혁신으로 프로젝트를 완성하십시오.
https://pixiumdigital.com
https://github.com/pixiumdigital