Блог

Я создаю библиотеку react с использованием typescript, структура моего проекта:

 dist/
example/simple
src/
...config files
  

Папка simple создается с помощью create-react-app . Я уже выполнил npm link процесс в simple папке, связывающей my-lib с внешним проектом. Но когда я использую import {...} from 'my-lib' from simple , появляется сообщение об ошибке:

 D:/codes/my-lib-folder/dist/my-lib.js 
Cannot find file: 'index.js' does not match the corresponding name on disk: 'D:codesmy-lib-foldernode_modulesReactreact'.
  

Мой tsconfig.json:

 {
  "compilerOptions": {
  "outDir": "./dist/",
  "sourceMap": true,
  "noImplicitAny": true,
  "module": "commonjs",
  "target": "es5",
  "jsx": "react"
  },
  "include": [
      "./src/**/*"
  ]
}
  

Моя конфигурация webpack:

 module.exports = {
  entry: "./src/index.ts",
  output: {
    path: __dirname   "/dist",
    filename: "my-lib.js",
    library: "myLib",
    libraryTarget: "umd"
  },
  resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: [".ts", ".tsx", ".js", ".json"]
  },
  module: {
    rules: [
      // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
      { test: /.tsx?$/, loader: "awesome-typescript-loader" },
      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      { enforce: "pre", test: /.js$/, loader: "source-map-loader" }
    ]
  },
  externals: {
    "react": "React"
  },
  mode: process.env.NODE_ENV ? process.env.NODE_ENV : "development"
};