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ằ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:
- 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