브라우저용 Node.js 라이브러리를 게시하는 방법은 무엇입니까? (역시 롤업 소개)

  • window 개체에 연결합니까, 아니면 더 나은 대안이 있습니까?
  • 일반적으로 몇 개의 네임스페이스를 연결합니까?
  • 브라우저 버전과 번들러 버전을 모두 어떻게 유지합니까?

  • 단순화를 위해 라이브러리 사용자가 번들러 또는 Node.js를 사용해야 합니까?
  • 라이브러리 사용자를 위해 번들을 제공하는 경우 어떤 번들러를 사용합니까?
  • 몇 퍼센트의 브라우저를 지원합니까? 어떤 ES 버전?

  • 그런데, 롤업을 사용하여 <script type="module"> 에 대한 TypeScript를 번들로 묶기 시작했기 때문에 window 개체에 연결할 필요가 없습니다.
  • Webpack just couldn't target ESM
  • 번들 ESM은 Deno에서도 사용할 수 있습니다.

  • Output of non-minified Rollup을 읽을 수 있습니다. Webpack은 그렇지 않으며 eval로 가득 차 있습니다. (Rollup의 축소된 버전도 상대적으로 읽을 수 있습니다.)
  • tsconfig.json"module": "commonjs"를 사용합니다(그래서 나는 ts-node , ts-mocha를 실행하고 esm 없이 노드용으로 게시할 수 있습니다). 하지만 rollup.config.jsesnext를 사용합니다.
  • Node용 빌드에도 tsc를 사용합니다. 롤업은 제대로 할 수 없습니다. 롤업은 declaration declarationMap 을 생성할 수 없습니다.


  • // rollup.config.js
    
    import typescript from '@rollup/plugin-typescript'
    import minify from 'rollup-plugin-babel-minify'
    
    const getConfig = ({ output, isMinify }) => {
      return {
        input: 'src/index.ts',
        output: {
          file: output,
          format: 'esm',
          sourcemap: true
        },
        plugins: [
          typescript({
            module: 'esnext'
          }),
          ...(isMinify ? [
            minify({
              comments: false
            })
          ] : [])
        ]
      }
    }
    
    export default [
      getConfig({ output: 'lib/index.mjs' }),
      getConfig({ output: 'lib/index.min.mjs', isMinify: true })
    ]
    

  • package.json 가 궁금하시다면

  • {
      "main": "lib/index.js",
      "module": "lib/index.mjs",
      "unpkg": "lib/index.min.mjs",
      "types": "lib/index.d.ts",
      "files": [
        "lib",
        "src"
      ],
      "scripts": {
        "build": "rimraf lib && rollup -c && yarn tsc",
        "tsc": "tsc -P src/tsconfig.json",
        "prepack": "yarn build && yarn deploy"
      }
    }
    

  • 그리고 tsconfig.json

  • {
      "compilerOptions": {
        "target": "ES2017",
        "module": "commonjs",
        "declaration": true,
        "declarationMap": true,
      }
    }
    

  • 생성된 파일은 여기에서 볼 수 있습니다 -- https://unpkg.com/any-serialize/ . 보시다시피 index.mjs은 읽기에 너무 좋습니다. 그리고 require() 또는 node_modules에서 가져오기가 없습니다.



  • 파타라폴 / 모든 직렬화


    방법을 제공하는 한 모든 JavaScript 개체를 직렬화합니다. 나는 이미 Date, RegExp 및 Function을 제공했습니다.





    특징은
  • 무엇이든 직렬화합니다.
  • 거의 모든 것을 역직렬화하지만 조금만 조정하면 모든 것과도 작동하도록 만들 수 있습니다.
  • 무엇이든 문자열로 해시합니다.
  • 무엇이든 복제합니다.
  • 외부 종속성이 없으며 고도로 사용자 정의할 수 있습니다.
  • 좋은 웹페이지 즐겨찾기