Я решил попробовать создать свой небольшой ui кит на react с помощью webpack. В каталоге с ui китом у меня вот такая структура:
build
node_modules
src
---- ui
----|---- button
----|----|---- MyButton
----|----|----|---- MyButton.tsx
---- index.ts
package.json
package-lock.json
tsconfig.json
webpack.config.json
В файл
src/index.ts я импортирую все свои созданные компоненты. Затем пишу
npm run build и создаю сборку.
index.ts
import MyButton from './ui/button/MyButton/MyButton'
export { MyButton }
package.json
{
"name": "grame-ui",
"version": "1.0.0",
"description": "My first and test ui kit made in React",
"main": "./build/index.js",
"scripts": {
"build": "webpack",
},
"keywords": [],
"author": "Dzhambulat",
"license": "ISC",
"devDependencies": {
"@types/react": "^18.3.2",
"@types/react-dom": "^18.3.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"ts-loader": "^9.5.1",
"typescript": "^5.4.5",
"webpack": "^5.91.0",
"webpack-cli": "^5.1.4"
},
"peerDependencies": {
"react": "*",
"react-dom": "*"
},
"files": [
"build"
]
}
webpack.config.json
const path = require('path')
module.exports = {
mode: 'development',
entry: './src/index.ts',
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'build'),
libraryTarget: 'umd',
clean: true,
},
resolve: {
extensions: ['.ts', '.tsx'],
},
externals: {
react: 'react',
},
module: {
rules: [
{ test: /\.(ts|tsx)$/, use: ['ts-loader'], exclude: '/node_modules/' },
],
},
}
После сборки я пишу команду
npm link чтобы была возможность пользоваться ui китом локально.
Затем перехожу в папку с рабочим проектом и пишу в консоли
npm link grame-ui и пытаюсь импортировать компонент
MyButton из
grame-ui в файле
App.tsx рабочего проекта.
App.tsx
import { MyButton } from 'grame-ui'
function App() {
return <MyButton>1</MyButton>
}
export default App
В редакторе кода никаких красных полосок и ошибок не видно. Но при запуске dev сервера рабочего проекта в консоли выползает ошибка:
SyntaxError: The requested module '/grame-ui/build/index.js?t=1716632618529' does not provide an export named 'MyButton' (at App.tsx:1:10)
День потратил на решение проблемы, но ничего не понял.
Средний
