React : วิธีการสร้างและเผยแพร่ React Package บน Npm

Npm ย่อมาจาก Node Package Manager เป็นเครื่องมือที่ช่วยทำการจัด package ต่างๆ ในโปรเจคที่รันด้วย Node.js ซึ่งนักพัฒนาที่ใช้ Node.js ก็จะคุ้นเคยกันอยู่แล้ว เพราะทุกโปรเจคจะต้องได้ติดตั้ง npm package เพิ่มเติมบ้างไม่มากก็น้อย

ในบล็อกนี้ เราจะมาทำ Npm Package ซึ่งจะเป็นการสร้าง React Component Package เช่น ปุ่ม รูปภาพ หรือ component อื่นๆ ของเราเอง แล้วเผยแพร่ให้นักพัฒนาคนอื่น นำไปติดตั้งได้ผ่าน npm install โดย React Component ที่เราจะสร้างนั้นจะใช้ Component Library ของ Chakra UI

จากที่ได้ทดลองสร้าง Npm Package มาจะพบว่า ถ้าเราสร้าง Package ที่เขียนด้วย Node.js เพียวเลย เราไม่จำเป็นต้องใช้ตัว compiler อื่นมาแปลงโค้ดให้เป็น javascript แบบที่เบราเซอร์เข้าใจ

ตัวอย่างตามเว็บไซต์นี้ https://www.section.io/engineering-education/npm-packages/

แต่การสร้าง React Component เพื่อจะนำไปเป็น Npm Package ถ้าเขียนโค้ดแบบ React ตรงๆ แล้ว publish ตรงไปเลย จะทำให้ไม่สามารถนำไปใช้งานได้ พอรันโปรแกรมแล้วจะเออเรอแบบภาพด้านล่าง

เนื่องจากโค้ดที่เราเขียนใส่ใน Npm Package นั้น ไม่สามารถเข้าใจได้โดย เบราเซอร์ (browser) นั้นเอง ดังนั้นเราจึงจำเป็นต้องใช้การ compile โค้ดก่อนแล้วจึง publish เป็น Npm Package

วิธีการสร้างและเผยแพร่ React Package บน Npm

เริ่มแรกจะต้องติดตั้ง Node.js ก่อน (โดยปกติก็จะติดตั้งกันอยู่แล้ว แต่ใครยังไม่ได้ติดตั้งอย่าลืมติดตั้งด้วย เนื่องจากต้องใช้คำสั่งของ node ทั้งหมด ดาวน์โหลดโปรแกรมได้ที่ https://nodejs.org/en/)

1. ล็อกอิน npm ผ่าน command line (หากยังไม่สมัครสมาชิกของ npm เข้าไปสมัครได้ที่ https://www.npmjs.com/signup)

npm login

เมื่อพิมพ์คำสั่ง npm login แล้ว ระบบจะให้กรอก Username Password และ Email เพื่อยืนยันตัวตน จากนั้นถ้าล็อกอินสำเร็จ ระบบจะแจ้งว่า ได้ทำการล็อกอินด้วย บัญชีนี้แล้ว ตามภาพด้านล่าง

2. เตรียมโค้ดโปรแกรม

ตัวอย่างนี้จะใช้ component ที่เป็น Slide Image ชื่อ ImageSlide.js ที่สร้างด้วย Chakra UI เป็น package ที่จะเผยแพร่บน npm

การตั้งโฟลเดอร์ ให้ตั้งโฟลเดอร์ให้ง่ายต่อการนำ component ออกไปใช้งาน

โดยที่ให้ตั้งโฟลเดอร์ lib > component > ImageSlide.js ตามภาพ

โค้ดในไฟล์ ImageSlide.js เปิดดูได้จาก GitHub

https://github.com/adaydesign/react-image-slide-chakra/blob/main/src/lib/components/ImageSlide.js

ในโฟลเดอร์ lib จะต้องมี ไฟล์ index.js เพื่อเป็นการรวม component ที่จะนำไปใช้ข้างนอก

import ImageSlide from "./components/ImageSlide"

export { ImageSlide }

3. อัพโหลดโค้ดเข้า Repository (เก็บไว้ที่ GitHub ก็ได้)

ทำการ git init , git add . , git commit , git remote add, git push โค้ดเข้าเก็บไว้ใน GitHub หรือ Repository Server อื่น

(อ่านเพิ่มเติมที่ https://www.appcodemia.com/คำสั่ง-git-ที่ต้องรู้จัก/)

ต้องอัพเดท และ push โค้ดเข้า git ทุกครั้ง ก่อนที่จะทำการ publish เข้า npm เสมอ เพื่อให้ข้อมูลใน npm และ git สัมพันธ์กัน

อย่าลืมเขียนไฟล์ Readme.md ไว้ด้วย เพราะระบบของ GitHub และ Npm จะดึงข้อความในไฟล์ Readme.md ไปแสดงในหน้าอธิบายการใช้งาน Package ของเรา

4. ติดตั้ง Babel และทำการ build โค้ดโปรแกรมไว้ในโฟล์เดอร์ dist

ติดตั้ง Babel ด้วยคำสั่ง command line

npm install --save-dev @babel/core @babel/cli @babel/preset-env 
npm install -save @babel/polyfill

สร้างไฟล์ babel.config.json ไว้ที่โฟลเดอร์นอกสุดของโปรเจค และก็อปปี้โค้ดตามด้านล่างเข้าใส่ในไฟล์ babel.config.json

{
 "presets": [
  [
   "@babel/env",
    {
     "targets": {
     "edge": "17",
     "firefox": "60",
     "chrome": "67",
     "safari": "11.1"
      },
   "useBuiltIns": "usage",
   "corejs": "3.6.5"
    }
],
   "@babel/preset-react"
]
}

@babel/env จะบอกว่าใช้กับเบราเซอร์เวอร์ชันบ้าง และ

@babel/present-react จะอนุญาตให้ Babel คอมไพล์ JSX

5. แก้ไข script ในไฟล์ package.json

ให้เพิ่มคำสั่ง build เข้าไป

"build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files";

หากมีคำสั่ง build เดิมที่เป็นของ react-script อยู่แล้ว ให้เปลี่ยนชื่อคำสั่ง build เดิมได้เลย (ตัวอย่างจะเปลี่ยนจาก build เดิมเป็น react-build)

อธิบายคำสั่ง build เมื่อเรา พิมพ์คำสั่ง npm run build ใน command line แล้ว

โปรแกรมจะคัดลอกไฟล์ใน src/lib ไปที่โฟลเดอร์ใหม่คือ dist โฟลเดอร์นี้จะมองไม่เห็นแต่จะถูกเพิ่มหลังจากที่ build เสร็จแล้ว

จากนั้นรันคำสั่ง npm run build

npm run build

ผลการรันคำสั่ง npm run build เมื่อรันสำเร็จ โปรแกรมจะสร้างโฟล์เดอร dist ขึ้นมา

หมายเหตุ การรันคำสั่ง NODE_ENV=production จะไม่ทำงานบน Windows จะทำให้พบเออเรอ

"NODE_ENV" is not recognized as an internal or external command, operable command or batch file.

วิธีแก้ไข ให้ติดตั้ง win-node-env ดัวยคำสั่ง

npm install -g win-node-env

แล้วจะทำให้ Windows สามารถใช้คำสั่ง NODE_ENV ได้เหมือนกับ Linux และ macOS (อ่านแนวทางการแก้ไขด้วยวิธีอื่นเพิ่มเติม)

6. เพิ่มข้อมูลในไฟล์ package.json

ข้อมูลเกี่ยวกับ package ที่เรากำลังสร้างขึ้นนี้ จะมีคำอธิบายต่างๆ เก็บไว้ในไฟล์ package.json ให้เราทำการแก้ไขข้อมูลในไฟล์นี้

สิ่งที่ต้องแก้ไขอยู่ในฟิวด์ name, version, private (เปลี่ยนเป็น false หรือเอาออกฟิวด์นี้ออก) และฟิวด์คำอธิบายอื่นๆ ได้แก่

description, keywords และ author สามารถแก้ไขตามด้านล่างได้เลย โดยเปลี่ยนเป็นข้อมูล package ของตัวเอง

"name": "react-chakra-slide-show",
  "version": "1.0.10",
  "description": "React component for image slide",
  "keywords": ["react","slide","component","chakra ui","image"],
  "main": "dist/index.js",
  "module": "dist/index.js",
  "files": ["dist","README.md"],
  "author": "Chalermchon Samana <aday.3ddesign@gmail.com>",
  "homepage": "https://www.appcodemia.com",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/adaydesign/react-image-slide-chakra"
  },

7. publish เข้า npm

เมื่อข้อมูลพร้อมทั้งหมดแล้ว สามารถใช้คำสั่ง npm publish ได้เลย

npm publish

การเปลี่ยนแปลงครั้งต่อไปที่ publish ใหม่ ให้แก้ไข version ด้วยทุกครั้ง เท่านี้ package ของเราก็สามารถดาวน์โหลดไปใช้งานผ่าน npm ได้แล้ว

เข้าไปดูหน้าเว็บของ package ที่พึ่งเผยแพร่เข้าไปที่ npm

ล็อกอินเข้า npm ที่หน้าเว็บไซต์ แล้วเลือกเมนู Packages ก็จะเห็น packages ทั้งหมดของเรา และสามารถเลือกไปเปิดดูด้านในของแต่ละ package ได้

มาทดลองใช้งาน Package ของเรากัน

ตัวอย่างที่ได้ลองทำ package ชื่อว่า react-chakra-slide-show เป็น React Component ที่ใช้ไลบรารี่ของ Chakra UI สร้างขึ้น

https://www.npmjs.com/package/react-chakra-slide-show

1. สร้าง React Project และ ติดตั้ง Chakra UI

npx create-react-app my-app
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

2. ติดตั้ง package ของ react-chakra-slide-show (package ที่จะทดสอบการติดตั้งและใช้งาน)

npm i react-chakra-slide-show

3. ก็อปปี้รูปไปไว้ที่โฟลเดอร์ public ของโปรเจค ตัวอย่างนี้ ทำรูปไว้ 4 รูป ชื่อ image1 image2 image3 image4.jpg

4. แก้ไขโค้ดไฟล์ App.js ตามด้านล่าง

import { ChakraProvider } from '@chakra-ui/react'
import { ImageSlide } from 'react-chakra-slide-show'
import React, { useMemo } from 'react'

const App = () => {
  const images = useMemo(() => [
    'image1.jpg',
    'image2.jpg',
    'image3.jpg',
    'image4.jpg'
  ], [])

  const captions = useMemo(() => [
    'caption for image1.jpg',
    'caption for image2.jpg',
    'caption for image3.jpg',
    'caption for image4.jpg'
  ], [])

  return (
    <ChakraProvider>
      <ImageSlide images={images} captions={captions} />
    </ChakraProvider>
  )
}

export default App

5. run โปรแกรม

npm start

6. ผลลัพธ์ที่ได้ ก็จะได้ Image Slide พร้อมกับ ปุ่มกด และ caption ของแต่ละภาพ ภาพก็จะเปลี่ยนไปเรื่อยๆ แบบอัตโนมัติ

สรุป

ในบล็อกนี้เราได้ทำการสร้าง package ที่เป็น React Component Package ที่จะนำไปเผยแพร่ที่ Npm ซึ่งสิ่งที่แตกต่างจากการทำ package ทั่วไปคือ เราจะต้องคอมไพล์โค้ดให้อยู่ในรูปแบบของ javascript ที่เบราเซอร์เข้าใจก่อน จึงจะทำการ publish เข้า Npm และคนอื่นสามารถใช้ได้ และคอมไพล์เลอร์ที่ใช้ก็คือ Babel

การตั้งค่าไฟล์ package.json เป็นไฟล์ที่จะอธิบายรายละเอียดของ package ดังนั้นต้องให้ความสำคัญด้วย สิ่งสุดท้ายที่ขาดไม่ได้เลยคือ โค้ดจะต้องอัพเข้า Git Repository (เช่น GitHub) และต้องมีไฟล์ README.md เพื่ออธิบายโปรเจคนั้น

สุดท้ายการเผยแพร่ package เข้าสู่ npm สามารถทำผ่าน GitHub ได้เลยเช่นกัน ลองศึกษากันต่อที่

https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry

อ้างอิง

1. https://levelup.gitconnected.com/publish-react-components-as-an-npm-package-7a671a2fb7f
2. https://babeljs.io
3. https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry