1

@soil/dom次のようにして、webpack経由で呼び出されるnpmパッケージを使用しようとしています:

import {h} from '@soil/dom'

しかし、実行するwebpackと、次の警告とエラーが表示されます。

WARNING in ./node_modules/@soil/dom/build/index.js 3:24-31
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
 @ ./src/index.ts

ERROR in ./node_modules/@soil/dom/build/index.js
Module not found: Error: Can't resolve './html/h' in '/home/daniel/Code/time-flies/node_modules/@soil/dom/build'
 @ ./node_modules/@soil/dom/build/index.js 7:8-70
 @ ./src/index.ts

私のpackage.jsonファイルは次のようになります。

{
  "dependencies": {
    "@soil/dom": "0.6.0"
  },
  "devDependencies": {
    "typescript": "2.9.1",
    "ts-loader": "4.4.1",
    "webpack": "4.12.0",
    "webpack-cli": "3.0.3"
  }
}

私のwebpack.config.jsファイルは次のようになります。

const path = require('path')

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

ちなみに、npm パッケージのディレクトリ構造は次の@soil/domようになります。

@soil/
└── dom
    ├── build
    │   ├── html
    │   │   ├── h.js
    │   │   └── ...
    │   ├── index.js
    │   └── ...
    ├── package.json
    └── ...

含まれるpackage.jsonもの:

{
    "main": "build/index.js"
}

index.jsファイルには以下が含まれます (UMD モジュール システムを対象としてコンパイルされています) 。

var h_1 = require("./html/h");
exports.h = h_1.h;

'./html/h'この時点でwebpack が相対パスを解決できないのはなぜですか? この写真には何が欠けていますか?

4

0 に答える 0