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

In Library source code

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

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)

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!

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

In project

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

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

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)

In library:

• pack thư viện

rm -rf awing-library-0.0.1.tgz && yarn build && npm pack

In Project:

• Xoá awing-library trong node_modules

rm -rf node_modules/awing-library

• Install pack awing-library

npm install "path_library\awing-library-v0.0.1.tgz" --legacy-peer-deps

• Lệnh gộp

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.

Với Vite

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

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']
  }
});

Với Webpack/Create React App

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

module.exports = {
  // ... cấu hình khác
  
  module: {
    rules: [
      {
        test: /\.wasm$/,
        type: 'asset/resource'
      }
    ]
  }
};

Copy WASM files khi deploy

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

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

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