允许在 vscode 上自动导入我的 React 库

Question

I'm trying to do a library of components for React and publish on npm using webpack and babel to compile to Es5.

Almost everything worked, but for some reason, the project that consumes this lib cant auto import their components

I have a project on github with the setup I used:

https://github.com/dattebayorob/react-loading

//webpack.config.js
https://github.com/dattebayorob/react-loading/blob/master/webpack.config.js

//.babelrc
https://github.com/dattebayorob/react-loading/blob/master/.babelrc

//package.json
https://github.com/dattebayorob/react-loading/blob/master/package.json

I'm expecting to import components from my lib with 'CTRL+space' when typing then

Now, I can import from my lib manualy with import { Component } from 'my-react-lib'

Answer 1

在dattebayorob/react-loading/index.d.ts尝试：

export  *  from './src/components'

Answer 2

In package.json , you have "main": "./index.d.ts" , but that's not a valid JS file, as it does not contain actual code, only type definitions.

In a library, usually you need to have an src/index.js file that imports / exports all components and in package.json you add the build artifact as main: "main": "dist/index.js" .

Also, don't forget to explicitly specify the files: ["dist"] attribute in package.json so the src folder is not downloaded when your package is installed.

Answer 3

Sometimes, when using Typescript in VSCode, you have to run the Typescript: Restart TS Server command in your command palette for auto import to work after creating new files. It's a bug.