CLASSFUNC BLOG
We Share Our Knowledge
Cách sử dụng snowpack để build dự án react
Dam Van Duong
5 Th09 2020 10:26

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

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

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:

  1. Cài đặt bằng npm: `npm install --save-dev snowpack`.
  2. Cài bằng yarn: `yarn install --dev snowpack` (cách này mình dùng).
  3. 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: