J'ai construit un package NPM relativement petit composé d'environ 5 classes ES6 différentes contenues dans un fichier chacune, elles ressemblent toutes à peu près à ceci:
export default class MyClass {
// ...
}
J'ai ensuite configuré un point d'entrée pour mon package qui ressemble à ceci:
export { default as MyClass } from './my-class.js';
export { default as MyOtherClass } from './my-other-class.js';
J'ai ensuite exécuté le point d'entrée via webpack et babel pour finir avec un index.js transpilé et minifié
L'installation et l'importation du package fonctionnent correctement, mais lorsque je fais ce qui suit à partir de mon code client:
import { MyClass } from 'my-package';
Il ne se contente pas d'importer "MyClass", il importe le fichier entier, y compris toutes les dépendances de chaque classe (certaines de mes classes ont d'énormes dépendances).
Je me suis dit que c'est ainsi que fonctionne le webpack lorsque vous essayez d'importer des parties d'un package déjà fourni? J'ai donc configuré ma configuration de webpack local pour exécuter Babel node_modules/my-package
aussi, puis j'ai essayé:
import { MyClass } from 'my-package/src/index.js';
Mais même cela importe chaque classe exportée par index.js. La seule chose qui semble fonctionner comme je le souhaite, c'est si je le fais:
import MyClass from 'my-package/src/my-class.js';
Mais je préfère de beaucoup:
- Pouvoir importer le fichier transpilé et minifié pour que je n'ai pas à dire à webpack d'exécuter babel dans node_modules et
- Être capable d'importer chaque classe individuelle directement à partir de mon point d'entrée au lieu d'avoir à entrer le chemin d'accès à chaque fichier
Quelle est la meilleure pratique ici? Comment les autres réalisent-ils des configurations similaires? J'ai remarqué que GlideJS a une version ESM de son package qui vous permet d'importer uniquement les choses dont vous avez besoin sans avoir à exécuter babel par exemple.
Le package en question: 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';
. Vous pouvez également supprimer le package de génération src pour raccourcir le chemin d'accès au fichier.
main
attribut (point d'entrée) dans le package.json de votre bibliothèque? Enregistrez votre build. Et comment vous regroupez votre paquet lib?