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:
- 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ằngSNOWPACK_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:
- https://www.snowpack.dev/
- https://www.npmjs.com/package/@snowpack/plugin-dotenv
- https://github.com/pikapkg/create-snowpack-app/tree/master/packages/plugin-babel
- https://github.com/pikapkg/create-snowpack-app/tree/master/packages/plugin-react-refresh
- https://github.com/pikapkg/create-snowpack-app/tree/master/packages/plugin-webpack