npm で install したモジュールの使い方

Question

　こんにちは。

DarkReader を自サイトで使うため、npmを始めました。
インストールは手順どおりにできたのですが、モジュールの使い方がわかりません。

　サンプルコードが美しいので再現したいのですが.....

DarkReader.enable({
    brightness: 100,
    contrast: 90,
    sepia: 10
});

DarkReader.disable();

// Enable when the system color scheme is dark.
DarkReader.auto({
    brightness: 100,
    contrast: 90,
    sepia: 10
});

// Stop watching for the system color scheme.
DarkReader.auto(false);

// Get the generated CSS of Dark Reader returned as a string.
const CSS = await DarkReader.exportGeneratedCSS();

// Check if Dark Reader is enabled.
const isEnabled = DarkReader.isEnabled();

しかしどうやっても、

Darkreader in undefined

と出てしまいます。

どうファイルを読み込めば、こんな風に使えるのでしょうか。

また ES modules を使うならと別のコードもあります。

import {
    enable as enableDarkMode,
    disable as disableDarkMode,
    auto as followSystemColorScheme,
    exportGeneratedCSS as collectCSS,
    isEnabled as isDarkReaderEnabled
} from 'darkreader';

enableDarkMode({
    brightness: 100,
    contrast: 90,
    sepia: 10,
});

disableDarkMode();

followSystemColorScheme();

const CSS = await collectCSS();

const isEnabled = isDarkReaderEnabled();

ES modules を調べたところ、

<script type="module">
......
</script>

で使えるとあり、試行錯誤したのですが、上手く読み込めません。

例えば

<script type="module">
import {
    enable as enableDarkMode,
    disable as disableDarkMode,
    auto as followSystemColorScheme,
    exportGeneratedCSS as collectCSS,
    isEnabled as isDarkReaderEnabled
} from ',./......./darkreader.js';    #パスは適当

</script>

とすると、ファイルは認識するのですが、上手く関数を読み込めません。

多分、npm や node.js を上手く使うのだろうと思い、色々調べましたがごちゃごちゃしてよくわかりません。たまに良さげな記事を見つけても

import  ...... from .......

と説明なしに書いてあり、みなさんはわかるんでしょうが、置いてけぼりです。

普通に読み込むときは、頭に「 ./ , ../ , /」などを付けないといけないですし、拡張子も省略できないはずなので、やはり node.js や npm を上手く使うのでしょうが、どうするのでしょうか？？

長文駄文失礼しました。どうか、よろしくお願いします。😂

Answer 1

ふつうに読み込んだらできました。解凍してくれた方は、ありがとうございました。

<script src="....../darkreader.js'"></script>
<script>
    (async function(){
        DarkReader.enable({
                 brightness: 100,
                    contrast: 90,
                        sepia: 10
        });
  // Enable when the system color scheme is dark.
        DarkReader.auto({
                brightness: 100,
                    contrast: 90,
                        sepia: 10
        });
    })();
</script>

Answer 2

上の方に以下のコードを追加してみてはどうでしょうか？

const DarkReader = require('darkreader');

Comments

[tetsuo6969]

回答ありがとうございます。

require は node.js でモジュールを読み込む関数なんですね。

たしかに、jquery で試すとうまくいきましたが、darkreader では
```
window.is not defined
:
:
:
```

と出てしまいます。

調べると、どうも Node.js では window を使えないとあります。[ReferenceError : window is not defined at object. ](https://stackoverflow.com/questions/45964178/referenceerror-window-is-not-defined-at-object-anonymous-node-js)

よくわからなくて、すみません。😑とにかく darkreader を使えれば良いのですが。。。

npm で インストールするのは間違いないので、そこから、ES modules で上手く読み込むのかな....と考えたりもしますが、わかりません。

多分、省略されるなので、単純なものだと思います。

解決していただけると嬉しいです。🤩