Cách sử dụng snowpack để build dự án react

Dương Đàm ✍︎︎ 21-09-2020

Github source code: https://github.com/duongdam/classfunc-react-snowpack

A. Cài đặt snowpack

Bạn có thể cài đặt snowpack toàn cầu bằng npm install -g snowpack ( đấy là trang chủ snowpack nói thế, còn mình thử thì khi cài đang có một số lỗi) Có 2 cách để cài đặt cục bộ như 1 client ở máy trạm thông qua gói script json như sau:

Cài đặt bằng npm: npm install --save-dev snowpack.
Cài bằng yarn: yarn install --dev snowpack (cách này mình dùng).
Hoặc có thể clone 1 dự án react mới bằng :

npx create-snowpack-app my-projects --template @snowpack/app-template-react --use-yarn

Sau khi cài đặt: Tiến hành chạy lệnh snowpack để tạo map location mặc định cho file web_module Sau đó chạy lệnh snowpack dev để start server snowpack cho dev. Chạy lệnh snowpack --reload nếu muốn làm mới cache và reload lại snowpack

Build product: sử dụng plugin @snowpack/plugin-webpack

// snowpack.config.json
{
  // Optimize your production builds with Webpack
  "plugins": [["@snowpack/plugin-webpack", {/* ... */}]]
  “scripts”: {
	“bundle:*” : “@snowpack/plugin-webpack”
	}
}
Sử dụng lệnh: "snowpack build"

Evironment:

Sử dụng plugin : "@snowpack/plugin-dotenv”
Trong file .env có các data cần thiết của mình.
Để lấy dữ liệu từ môi trường ta sử dụng import.meta ví dụ import.meta.env.SNOWPACK_PUBLIC_REACT_APP_LOGIN_URL;
Lưu ý phải có tiền tố SNOWPACK_PUBLIC_ vì Snowpack chỉ hỗ trợ các biến môi trường bắt đầu bằng SNOWPACK_PUBLIC_*. Snowpack làm điều này bởi vì mọi thứ trong ứng dụng web của bạn được gửi tới trình duyệt và Snowpack không muốn bạn vô tình chia sẻ các khóa / biến env nhạy cảm với ứng dụng web công cộng của bạn

Một số cấu hình cần thiết của các file:

babel.config.json

{
  "extends": "@snowpack/app-scripts-react/babel.config.json",
  "plugins": [
    ["@babel/plugin-transform-react-jsx"],
    ["@babel/plugin-proposal-class-properties", {"loose": true}]
  ],
  "env": {
    "development": {
      "plugins": ["react-refresh/babel"],
      "compact": false
    },
    "production": {"plugins": ["react-refresh/babel"],
      "compact": false
    }
  }
}

snowpack.config.js

const nodePolyfills = require('rollup-plugin-node-polyfills')();

module.exports = {
    "installOptions": {
        "rollup": {
            "plugins": [nodePolyfills]
        },
        "env": {
            "SNOWPACK_PUBLIC_NODE_ENV": true
        }
    },
    "extends": "@snowpack/app-scripts-react",
    "plugins": ["@snowpack/plugin-webpack", "@snowpack/plugin-dotenv", "@snowpack/plugin-babel", "@snowpack/plugin-react-refresh"],
    "scripts": {
        "mount:public": "mount public --to /",
        "mount:src": "mount src --to /_dist_",
        "mount:web_modules": "mount web_modules --to /web_modules",
        "build:js,jsx,mjs,cjs,ts,tsx": "@snowpack/plugin-babel",
        "bundle:*": "@snowpack/plugin-webpack"
    },
    "devOptions": {
        "port": 3023,
        "hostname": "localhost",
        "fallback": "index.html"
    },

};

package.json

  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@babel/plugin-transform-react-jsx": "^7.10.4",
    "@snowpack/app-scripts-react": "^1.6.0-alpha.0",
    "@snowpack/babel-plugin-package-import": "^1.0.0",
    "@snowpack/plugin-babel": "^1.4.0",
    "@snowpack/plugin-dotenv": "^1.6.0-alpha.0",
    "@snowpack/plugin-react-refresh": "^1.3.0",
    "@snowpack/plugin-webpack": "^1.6.0-alpha.0",
    "@testing-library/jest-dom": "^5.5.0",
    "@testing-library/react": "^10.0.3",
    "babel-plugin-import": "^1.13.0",
    "jest": "^25.4.0",
    "prettier": "^2.0.5",
    "rollup-plugin-node-polyfills": "^0.2.1",
    "snowpack": "^2.6.4"
  }

Một số chức năng của plugin:

@snowpack/plugin-babel: để build các file js,jsx,ts,tsx,css... tạo web_modules cho snowpack
@snowpack/app-scripts-react: Extends mặc định khi để build project React, trong đó sẽ có nhiều gói như: @babel/core @babel/plugin-syntax-import-meta @babel/preset-react @babel/preset-typescript @snowpack/plugin-babel @snowpack/plugin-dotenv babel-jestbabel-preset-react-app react-app-polyfill
@snowpack/plugin-dotenv: hỗ trợ để sử dụng các biến môi trường development & production

Migrating từ một dự án React cũ:

Các bước như sau:

Bước 1: install snowpack bằng yarn: yarn install --dev snowpack.
Bước 2: Tạo các file: .prettierrc, babel.config.json, jest.config.js, jest.setup.js, snowpack.config.js Cách nhanh nhất bạn install 1 app sử dụng snowpack mới. copy các file này sang project cũ. copy phần "devDependencies" trong package.json
Bước 3: chạy lệnh: snowpack
Bước 4: chạy lệnh: snowpack dev và chờ để fix các lỗi về import/export. cho đến khi fix xong.

Hoặc tạo 1 snowpack react app mới, và chuyển dần code từ source cũ sang :)

Tài liệu tham khảo: