How to link "Awing-library" to project in local branch: r18-mui5-beta

$3

_Sau khi thực hiện mỗi lệnh đều phải trở về thư mục gốc của thư viện_

- Step 1: Build thư viện

``shell
yarn build or yarn dev
`

- Step 2: Tạo link thư viện

Cách 1: Tự động bằng script (Khuyên dùng)
`shell
npm run create-link
`

Cách 2: Thủ công - Vui lòng copy từng dòng để chạy, chú ý: phải đứng đúng ở địa chỉ của project!

`shell
yarn build
yarn link
cd /d/Awing/FE/react-new/node_modules/react && yarn link
cd /d/Awing/FE/react-new/node_modules/react-dom && yarn link
cd /d/Awing/FE/react-new/node_modules/@mui/styles && yarn link
cd /d/Awing/FE/react-new/node_modules/@mui/material && yarn link
`

$3

_Sau khi thực hiện mỗi lệnh đều phải trở về thư mục gốc của project_

- Xoá dependencies trong node_modules

`shell
yarn unlink awing-library && rm -rf node_modules/awing-library node_modules/react node_modules/react-dom node_modules/@mui/styles node_modules/@mui/material
`

- Link library to project

`shell
yarn link awing-library react react-dom @mui/styles @mui/material
`

Install lib to project with Pack (giống dự án thực tế nhất)

$3


- pack thư viện
`shell
rm -rf awing-library-0.0.1.tgz && yarn build && npm pack
`

$3

- Xoá awing-library trong node_modules
`shell
rm -rf node_modules/awing-library
`

- Install pack awing-library
`shell
npm install "path_library\awing-library-v0.0.1.tgz" --legacy-peer-deps
`

- Lệnh gộp
`shell
rm -rf node_modules/awing-library && npm install "path_library\awing-library-v0.0.1.tgz" --legacy-peer-deps
`




peerDependencies:

`
"@emotion/react": "11.14.0",
"@emotion/styled": "11.14.0",
"@mui/icons-material": "6.1.10",
"@mui/lab": "6.0.0-beta.15",
"@mui/material": "6.1.10",
"@mui/styles": "6.1.10",
"@mui/x-date-pickers": "7.23.0",
"@mui/x-tree-view": "7.23.0",
"i18next": "23.16.2",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-i18next": "15.1.0",
"react-router": "7.0.2",
"jotai": "^2.11.0"
`

Cấu hình cho WebAssembly (DynamicLinqExpression Component)

Nếu bạn sử dụng component DynamicLinqExpressionInput, bạn cần cấu hình project để serve các file WASM.

$3

Thêm vào vite.config.ts:

`typescript
import { defineConfig } from 'vite';

export default defineConfig({
// ... cấu hình khác

server: {
fs: {
// Cho phép serve files từ node_modules
allow: ['..']
}
},

optimizeDeps: {
exclude: ['awing-library']
}
});
`

$3

Thêm vào webpack.config.js hoặc sử dụng craco.config.js:

`javascript
module.exports = {
// ... cấu hình khác

module: {
rules: [
{
test: /\.wasm$/,
type: 'asset/resource'
}
]
}
};
`

$3

Khi build production, copy thư mục _framework từ library:

`bash


Trong script build của bạn


cp -r node_modules/awing-library/dist/_framework public/_framework
`

Hoặc thêm vào package.json:

`json
{
"scripts": {
"prebuild": "cp -r node_modules/awing-library/dist/_framework public/_framework",
"build": "vite build"
}
}
``