1つのNPMパッケージから複数のES6モジュールをエクスポートする方法


16

私は、1つのファイルに含まれる約5つの異なるES6クラスで構成される比較的小さなNPMパッケージを作成しました。それらはすべて次のように見えます。

export default class MyClass {
    // ...
}

次に、パッケージのエントリポイントを次のように設定しました。

export { default as MyClass } from './my-class.js';
export { default as MyOtherClass } from './my-other-class.js';

次に、エントリポイントをwebpackとbabelを介して実行し、最終的には変換されて縮小されたindex.jsを生成します。

パッケージのインストールとインポートは正常に機能しますが、クライアントコードから以下を実行すると、

import { MyClass } from 'my-package';

"MyClass"をインポートするだけでなく、すべてのクラスのすべての依存関係を含むファイル全体をインポートします(私のクラスの一部には大きな依存関係があります)。

すでにバンドルされているパッケージの一部をインポートしようとすると、webpackがどのように機能するかわかりましたか?したがって、私はnode_modules/my-packagebabelも実行するようにローカルのWebpack構成をセットアップしてから、次のことを試しました。

import { MyClass } from 'my-package/src/index.js';

ただし、これでもindex.jsによってエクスポートされたすべてのクラスがインポートされます。私が望むように機能しているように見える唯一のことは、私がそうするならば:

import MyClass from 'my-package/src/my-class.js';

しかし、私はむしろむしろ:

  1. 変換され縮小されたファイルをインポートできるため、node_modules内でbabelを実行するようにwebpackに指示する必要がありません。
  2. 各ファイルへのパスを入力する代わりに、エントリポイントから個々のクラスを直接インポートできる

ここでのベストプラクティスは何ですか?他のユーザーはどのようにして同様の設定を実現していますか?GlideJSにはESMバージョンのパッケージがあり、たとえばbabelを実行しなくても必要なものだけをインポートできることに気づきました。

問題のパッケージ:https : //github.com/powerbuoy/sleek-ui

webpack.config.js

const path = require('path');

module.exports = {
    entry: {
        'sleek-ui': './src/js/sleek-ui.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
        library: 'sleek-ui', // NOTE: Before adding this and libraryTarget I got errors saying "MyClass() is not a constructor" for some reason...
        libraryTarget: 'umd'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                ]
            }
        ]
    }
};

package.json

  "name": "sleek-ui",
  "version": "1.0.0",
  "description": "Lightweight SASS and JS library for common UI elements",
  "main": "dist/sleek-ui.js",
  "sideEffects": false, // NOTE: Added this from Abhishek's article but it changed nothing for me :/
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/powerbuoy/sleek-ui.git"
  },
  "author": "Andreas Lagerkvist",
  "license": "GPL-2.0-or-later",
  "bugs": {
    "url": "https://github.com/powerbuoy/sleek-ui/issues"
  },
  "homepage": "https://github.com/powerbuoy/sleek-ui#readme",
  "devDependencies": {
    "@babel/core": "^7.8.6",
    "@babel/preset-env": "^7.8.6",
    "babel-loader": "^8.0.6",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "@glidejs/glide": "^3.4.1",
    "normalize.css": "^8.0.1"
  }
}

1
mainlibのpackage.jsonに(エントリポイント)属性を追加しましたか?ビルドをチェックインします。そして、どのようにlibパッケージをバンドルしていますか?
Abhishek

package.jsonの主なプロパティは、package.jsonが記述しているモジュールへのエントリポイントへの方向です。Node.jsアプリケーションでは、requireステートメントを介してモジュールが呼び出されると、メインプロパティで指定されたファイルからのモジュールのエクスポートがNode.jsアプリケーションに返されます。
Abhishek

はい、メインプロパティは他のすべてのクラスをエクスポートする私のindex.jsを指します。私はwebpackとbabelを使用してmain / index.jsファイルをバンドルしています。それはすべて質問で説明されています。
powerbuoy

これはあなたを助けるかもしれない- danielberndt.net/blog/2018/...
アビシェーク

ビルドの実装-github.com/mui-org/material-ui/blob/master/packages/material-ui/…でもでき ますimport { MyClass } from 'my-package/src/MyClass';。ビルドサイズを短くするには、実行する方が良いです。srcビルドパッケージを削除して、ファイルパスを短くすることもできます。
Abhishek

回答:


1

すでにバンドルされているパッケージの一部をインポートしようとすると、webpackがどのように機能するかわかりましたか?

はい、それを設定する方法は、index.jsのすべてのクラスをインポートし、それを1つのファイルにトランスパイルします(最も一般的なES5をターゲットにしている場合)。つまり、そのファイルが別のファイルにインポートされると、それらのすべてのクラスとともに、ファイル全体が読み込まれます。

適切なツリーシェイクが必要な場合は、それをCommonJS(ES5)バンドルにトランスパイルしないでください。私の提案は、ES6モジュールを単独で、またはES5バンドルとは別の場所に保持することです。この記事は、これを完全に理解するのに役立ち、推奨される手順があります。基本的に、preset-envを使用してBabel環境を設定します(まだ使用していない場合は強くお勧めします)。これにより、ES6構文保持されます。ES5にトランスパイルしない場合は、関連するBabel構成を次に示します。

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "esmodules": true
        }
      }
    ]
  ]
}

この記事では、それぞれが異なるモジュール構文を使用する2つのバンドルをセットアップする方法について詳しく説明します。

また、注目に値し、記事でも説明されているように、package.jsonでESモジュールのエントリポイントを設定できます。これにより、Webpack / BabelにES6モジュールがどこにあるかがわかります。従来の知識では次のように言うようです:

{
  "main": "dist/sleek-ui.js",
  "module": "src/main.js"
}

しかし、Nodeのドキュメントには次のように記載されています。

{
  "type": "module",
  "main": "dist/sleek-ui.js",
  "exports": {
    ".": "dist/sleek-ui.js",
    "./module": "src/main.js"
  }
}

時間があれば、これで遊んでどれが正しく機能するかを確認しますが、これで十分です。


* ES5はネイティブモジュールをサポートしていないため、ES5を対象としたバンドルはCommonJS形式であり、すべての関連ファイルを含める必要があります。これはES2015 / ES6で導入されました。


追加targets.esmodules: trueしてみましたが、ビルドされたスクリプトは変更されましたが、最終的に何がインポートされたかは変更されませんでした。から単一のクラスをmy-packageインポートすると、すべてがインポートされます。私はpackage.json(他の変更と共に)の変更も試しましたが、それも何も変更しませんでした。ええと、type: module実際に追加すると、「ESモジュールを読み込むためにインポートを使用する必要があります:ESモジュールの/sleek-ui/webpack.config.js require()はサポートされていません」でビルドが壊れました。そのため、そのビットを削除する必要がありました。リンク先の記事を見てみましょう。
powerbuoy

記事で実際に設定するように言われましたがmodules: false(内部targetsではありません)、それでも機能しませんでした...私はソースファイルから直接インポートし、ネイティブで使用できるようになるまでnode_modulesを通じてbabelを実行し続けると思います。
powerbuoy

@powerbuoyソースファイルからのインポートが機能します。多分それは私の投稿から明確ではなかった、そしてそれがそうである場合、私はそれを編集することができますが、あなたはのようなクラスだけをインポートしたいですimport MyClass from 'my-package/myClass';。この良いレポの例はlodash-esです。
CaitlinWeb

-1

これは有効な使用例です。これを行うことimport { MyClass } from 'my-package'が最終的な目標ですが、これを行うためのより明確な方法があります。

でアグリゲーターインデックスファイルを作成しますmy-package。基本的my-package/index.jsには次のようになります。

import MyClass from './my-class.js'
import MyOtherClass from './my-other-class.js'

export { MyClass, MyOtherClass }

その後、行うことができますimport { MyClass } from 'my-package'。かんたん。

楽しんで!


これはまさに私がすでにやっていることであり、それは質問でかなりはっきりしていると思いました。
powerbuoy
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.