Создание примера веб-сайта веб-пакета в библиотеке TypeScript приводит к ошибкам импорта пути

Question

Я хочу добавить пример использования библиотеки, которую я создал. Я нахожу это чрезвычайно трудно сделать с помощью TypeScript и Webpack! Я получаю некоторые ошибки импорта, которые не могу исправить, независимо от того, как я это установил. Я думал, что это будет легко.

CLion вообще не жалуется. Runnning tsc в каталоге проекта root работает без ошибок.

Вот точный вывод, который я получаю из веб-пакета, когда запускаю npm run dev, когда мой cwd равен examples/webpack, а сценарии просто webpack :

<PROJECT-PATH-WINDOWS-SLASHES>\example\webpack>npm run dev

> <PROJECT-NAME>@1.0.0 dev <PROJECT-PATH-WINDOWS-SLASHES>\example\webpack
> webpack

Hash: 5c50eb206798faec9cc3
Version: webpack 4.41.6
Time: 2569ms
Built at: <DATE>
 1 asset
Entrypoint main = script.js
[11] ./index.tsx 9.77 KiB {0} [built]
[12] <PROJECT-PATH>/src/index.ts 6.2 KiB {0} [built] [4 errors]
[32] ./h.ts 2.67 KiB {0} [built]
    + 30 hidden modules

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in <PROJECT-PATH>/src/index.ts
Module not found: Error: Can't resolve '<SOME-TYPESCRIPT-FILE-WITHOUT-EXTENSION>' in '<PROJECT-PATH-WINDOWS-SLASHES>\src'
 @ <PROJECT-PATH>/src/index.ts 115:14-39
 @ ./index.tsx

ERROR in <PROJECT-PATH>/node_modules/zlib-asm/lib/Module.js
Module not found: Error: Can't resolve 'fs' in '<PROJECT-PATH-WINDOWS-SLASHES>\node_modules\zlib-asm\lib'
 @ <PROJECT-PATH>/node_modules/zlib-asm/lib/Module.js 3:110-123
 @ <PROJECT-PATH>/node_modules/zlib-asm/lib/BaseDeflate.js
 @ <PROJECT-PATH>/node_modules/zlib-asm/lib/Deflate.js
 @ <PROJECT-PATH>/node_modules/zlib-asm/lib/def.js
 @ <PROJECT-PATH>/node_modules/zlib-asm/browser.js
 @ <PROJECT-PATH>/node_modules/jsziptools/core/zlib_backend_wrapper.js
 @ <PROJECT-PATH>/node_modules/jsziptools/core.js
 @ <PROJECT-PATH>/node_modules/jsziptools/stream/gz/compress.js
 @ <PROJECT-PATH>/node_modules/jsziptools/stream/gz.js
 @ <PROJECT-PATH>/node_modules/jsziptools/gz/compress.js
 @ <PROJECT-PATH>/node_modules/jsziptools/gz.js
 @ <PROJECT-PATH>/src/index.ts
 @ ./index.tsx

ERROR in <PROJECT-PATH>/src/index.ts
Module not found: Error: Can't resolve '<SOME-TYPESCRIPT-FILE-WITHOUT-EXTENSION>' in '<PROJECT-PATH-WINDOWS-SLASHES>\src'
 @ <PROJECT-PATH>/src/index.ts 39:21-61
 @ ./index.tsx

ERROR in <PROJECT-PATH>/src/index.ts
Module not found: Error: Can't resolve '<SOME-TYPESCRIPT-FILE-WITHOUT-EXTENSION>' in '<PROJECT-PATH-WINDOWS-SLASHES>\src'
 @ <PROJECT-PATH>/src/index.ts 40:14-43 113:14-43
 @ ./index.tsx

ERROR in <PROJECT-PATH-WINDOWS-SLASHES>\src\index.ts
<PROJECT-PATH>/src/index.ts
[tsl] ERROR in <PROJECT-PATH-WINDOWS-SLASHES>\src\index.ts(1,26)
      TS2307: Cannot find module '<SOME-TYPESCRIPT-FILE-WITHOUT-EXTENSION>'.

ERROR in <PROJECT-PATH-WINDOWS-SLASHES>\src\index.ts
<PROJECT-PATH>/src/index.ts
[tsl] ERROR in <PROJECT-PATH-WINDOWS-SLASHES>\src\index.ts(3,22)
      TS2307: Cannot find module '<SOME-TYPESCRIPT-FILE-WITHOUT-EXTENSION>'.

ERROR in <PROJECT-PATH-WINDOWS-SLASHES>\src\index.ts
<PROJECT-PATH>/src/index.ts
[tsl] ERROR in <PROJECT-PATH-WINDOWS-SLASHES>\src\index.ts(60,35)
      TS2307: Cannot find module '<SOME-TYPESCRIPT-FILE-WITHOUT-EXTENSION>'.

ERROR in <PROJECT-PATH-WINDOWS-SLASHES>\src\index.ts
<PROJECT-PATH>/src/index.ts
[tsl] ERROR in <PROJECT-PATH-WINDOWS-SLASHES>\src\index.ts(61,35)
      TS2307: Cannot find module '<SOME-TYPESCRIPT-FILE-WITHOUT-EXTENSION>'.
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [2] (webpack)/buildin/global.js 472 bytes {0} [built]
    [3] (webpack)/buildin/module.js 497 bytes {0} [built]
        + 2 hidden modules
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! <PROJECT-NAME>@1.0.0 dev: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the <PROJECT-NAME>@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     <USER-PATH>.log

У меня есть такая структура:

├── examples/  
│   └── webpack/  
│       ├── index.tsx  
│       ├── h.ts
│       ├── package.json
│       ├── tsconfig.json
│       └── webpack.config.js
├── src/
    └── index.ts
├── package.json
└── tsconfig.json

Мне нужен tsconfig.json, потому что у меня есть собственная реализация h.ts вместо React.

В example/webpack/index.tsx я импортирую некоторый код:

import {a, b} from "../../";

examples/webpack/tsconfig.json:

{
    "compilerOptions": {
        "sourceMap": true,
        "jsx": "react",
        "jsxFactory": "h",
        "allowJs":  true,
        "baseUrl": ".",
        "lib": [
            "es2017",
            "dom",
            "dom.iterable"
        ]
    }
}

examples/webpack/webpack.config.js:

const path = require('path');

module.exports = {
    entry: './index.tsx',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            }
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    output: {
        filename: 'script.js',
        path: path.resolve(__dirname, 'dist'),
    },
};

/tsconfig.json:

{
  "compilerOptions": {
    "lib": [
      "es2017",
      "dom",
      "dom.iterable"
    ],
    "baseUrl": "src",
    "declaration": true,
    "removeComments": true
  },
  "exclude": [
    "example"
  ]
}

В package.json Я установил main будет src/index.ts.

Answer 1

Хорошо, мне удалось это исправить !!! Вот что я сделал, не уверен, что все это требуется, но здесь мы go:

Прежде всего, я избавился от всех ошибок модуля not found :

1. добавление путей "../.." в examples/webpack/tsconfig.json:

{
    "compilerOptions": {
        "sourceMap": true,
        "jsx": "react",
        "jsxFactory": "h",
        "allowJs":  true,
        "baseUrl": ".",
        "lib": [
            "es2017",
            "dom",
            "dom.iterable"
        ]
    },
    "include": ["../.."]
}

Добавление путей "../../src" в examples/webpack/webpack.config.js:

resolve.modules = [
    path.join(__dirname, '../../src'), // resolves local src dependencies
    path.join(__dirname, '../../node_modules') // resolves node_modules imports 
]

После всего этого у меня остались некоторые ошибки пакета (очень странно, поскольку этого не происходило при запуске tsc в корень; вероятно, что-то связанное с веб-пакетом), а именно этот:

ERROR in <PROJECT-PATH>/node_modules/zlib-asm/lib/Module.js
Module not found: Error: Can't resolve 'fs' in '<PROJECT-PATH-WINDOWS-SLASHES>\node_modules\zlib-asm\lib'

Я исправил вышеприведенное, внеся следующее изменение в webpack.config.js:

module.exports.node = 
    {
        fs: "empty"
    };