私は、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-package
babelも実行するようにローカルのWebpack構成をセットアップしてから、次のことを試しました。
import { MyClass } from 'my-package/src/index.js';
ただし、これでもindex.jsによってエクスポートされたすべてのクラスがインポートされます。私が望むように機能しているように見える唯一のことは、私がそうするならば:
import MyClass from 'my-package/src/my-class.js';
しかし、私はむしろむしろ:
- 変換され縮小されたファイルをインポートできるため、node_modules内でbabelを実行するようにwebpackに指示する必要がありません。
- 各ファイルへのパスを入力する代わりに、エントリポイントから個々のクラスを直接インポートできる
ここでのベストプラクティスは何ですか?他のユーザーはどのようにして同様の設定を実現していますか?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"
}
}
import { MyClass } from 'my-package/src/MyClass';
。ビルドサイズを短くするには、実行する方が良いです。srcビルドパッケージを削除して、ファイルパスを短くすることもできます。
main
libのpackage.jsonに(エントリポイント)属性を追加しましたか?ビルドをチェックインします。そして、どのようにlibパッケージをバンドルしていますか?