Try   HackMD

i18n package publish

packing

  • 目的是將小塊程式碼編譯成大塊複雜的程式碼
  • 精簡打包後的程式碼

rollup

  • 打包用的工具
    • 簡單輕量,對於簡單的專案剛剛好
    • 也可以使用webpack,code splitting與靜態資源導入做得好
    • 在開發應用時使用Webpack,開發library時使用Rollup
  • 輸出格式
    • 對於瀏覽器:iife
    • 對於node:cjs
    • 對於瀏覽器與node:使用umd
  • rollup.config.js (在pi-i18n中使用的設定)
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import {uglify} from 'rollup-plugin-uglify';

export default {
    input: 'src/index.js', // src的進入點
    output: {
        file: 'dist/i18n.js', // 輸出的位置,也是package的進入點
        format: 'umd',
        name: 'i18nResource', // 在引入時物件的名稱
    },
    plugins: [
        babel({ // 確保程式碼對browser的支援
            exclude: 'node_modules/**',
        }), 
        resolve(), // npm resolve 
        uglify(), // 最小化程式碼
    ],
};

plugins

  • rollup-plugin-babel
    • 透過babel將js中的es6/7語法轉成瀏覽器支援的語法
    • 如果不加可能會在較舊的瀏覽器上出現error

pulish

organizations

package

  • version
    • 每次publish的版本號
  • name
    • @組織名稱/套件名稱
  • main
    • npm引入的進入點,會是rollup輸出的檔案位置
  • updateDate
    • 更新的日期
  • files
    • 有哪些檔案要被pulish
    • Image Not Showing Possible Reasons
      • The image file may be corrupted
      • The server hosting the image is unavailable
      • The image path is incorrect
      • The image format is not supported
      Learn More →

pulish

  1. 清空之前build出來的東西
npx rimraf dist/*
  1. 用rollup打包新的東西
npx rollup -c // -c代表利用rollup.config.json檔的設定
  1. 更新package.json的version, updateDate
  2. (optional) 預覽送出後的文件
npm publish --dry-run
  1. 登入帳號後即可publish
npm publish

使用

  1. 把auth token放入設定檔
npm config set '//registry.npmjs.org/:_authToken' '66bfeee5-6806-4321-ace5-e3f65a5cc89b'
  1. 安裝對應版本的pi-i18n
npm i @pimq.tech/pi-i18n@x.x.x // x.x.x為版本號
  1. 在專案中使用