Estoy creando una biblioteca de componentes y me gustaría poder usarla en otros lugares.
Tengo el siguiente componente en src/components/List/List.tsx
import React from 'react' import styled from '@mui/material/styles/styled' import MuiList, { ListProps as MuiListProps } from '@mui/material/List' const ListStyled = styled(MuiList)` text-decoration: none; cursor: pointer; ` export const List: React.FC<MuiListProps> = ({ children, ...props }) => { return <ListStyled {...props}>{children}</ListStyled> } export default ListAl ejecutar:
rm -rf dist && NODE_ENV=production babel src/components --out-dir dist --copy-files --ignore __tests__,__snapshots__,__mocks__,test.tsx,stories.js La versión compilada es como dist/List/List.tsx :
import React from 'react' import styled from '@mui/material/styles/styled' import MuiList, { ListProps as MuiListProps } from '@mui/material/List' const ListStyled = styled(MuiList)` text-decoration: none; cursor: pointer; ` export const List: React.FC<MuiListProps> = ({ children, ...props }) => { return <ListStyled {...props}>{children}</ListStyled> } export default List El archivo es idéntico. Me gustaría ver dist/List/List.js idealmente para que lo usen mis paquetes. Pero me doy cuenta de que tal vez con TS no puede funcionar de esta manera, ya que las interfaces, etc., ya no se usarán. Entonces, lógicamente, creo que necesitaría dist/List/List.js acompañado de dist/List/List.d.ts ? Si es así, ¿cómo puedo hacer esto?
El problema es que babel no reconoce las extensiones de archivo .tsx de forma predeterminada. El --copy-files copia archivos que no están compilados; esta es la razón por la que se está copiando su archivo.
Puede agregar un indicador de extensiones con .tsx incluido --extensions '.tsx' e intentará compilarlas.
Pude compilar su archivo usando babel src/components/List.tsx --out-dir dist --extensions '.tsx' --presets @babel/preset-typescript
Salida de ejemplo:
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = exports.List = void 0; var _react = _interopRequireDefault(require("react")); var _styled = _interopRequireDefault(require("@mui/material/styles/styled")); var _List = _interopRequireDefault(require("@mui/material/List")); var _excluded = ["children"]; var _templateObject; function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); } var ListStyled = (0, _styled.default)(_List.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n text-decoration: none;\n cursor: pointer;\n"]))); var List = function List(_ref) { var children = _ref.children, props = _objectWithoutProperties(_ref, _excluded); return <ListStyled {...props}>{children}</ListStyled>; }; exports.List = List; var _default = List; exports.default = _default;En realidad, para crear una biblioteca o un paquete para su proyecto, debe usar el rollup junto con la implementación de las configuraciones de typescript .
Lo experimenté y perdí muchas horas para configurar la base, pero totalmente mi amigo nominó TSDX , CLI de configuración cero para el desarrollo del paquete TypeScript, que contiene:
Está creado por Jared Palmer , este paquete TSDX es una CLI para crear lo que quieras, incluso puedes agregar tus configuraciones adicionales. también tiene documentaciones completas y una comunidad muy activa. Todas las configuraciones de TypeScript, Babel, building están completamente configuradas en el mejor caso óptimo.
Puede crear un nuevo paquete con este comando:
npx tsdx create [your lib name] Y luego mueva sus códigos a la carpeta src , incluso los tipos de exportación no necesitan ninguna configuración, simplemente exporte los tipos en el archivo de exportación raíz de la carpeta src como se muestra a continuación:
// index.ts or index.tsx // the root index file in src folder import type { OneComponentProps } from '../OneComponent'; export type { OneComponentProps };