Criei um pacote NPM relativamente pequeno, composto por aproximadamente 5 classes ES6 diferentes contidas em um arquivo cada, todas elas se parecem com isso:
export default class MyClass {
// ...
}
Em seguida, configurei um ponto de entrada para o meu pacote que se parece com isso:
export { default as MyClass } from './my-class.js';
export { default as MyOtherClass } from './my-other-class.js';
Depois, executei o ponto de entrada no webpack e no babel, terminando com um index.js transpilado e minificado
Instalar e importar o pacote funciona bem, mas quando faço o seguinte no código do meu cliente:
import { MyClass } from 'my-package';
Ele não importa apenas "MyClass"; importa todo o arquivo, incluindo todas as dependências de todas as classes (algumas das minhas classes têm enormes dependências).
Imaginei que é assim que o webpack funciona quando você tenta importar partes de um pacote já empacotado? Então, eu configurei minha configuração local do webpack para executar também node_modules/my-package
através do babel e tentei:
import { MyClass } from 'my-package/src/index.js';
Mas mesmo isso importa todas as classes exportadas pelo index.js. A única coisa que parece funcionar do jeito que eu quero é se eu fizer:
import MyClass from 'my-package/src/my-class.js';
Mas eu prefiro:
- Poder importar o arquivo transpilado e minificado para que eu não precise dizer ao webpack para executar o babel dentro de node_modules e
- Ser capaz de importar cada classe individual diretamente do meu ponto de entrada, em vez de precisar digitar o caminho para cada arquivo
Qual é a melhor prática aqui? Como outras pessoas conseguem configurações semelhantes? Notei que o GlideJS possui uma versão ESM de seu pacote, que permite importar apenas o que você precisa sem precisar executar o babel por exemplo.
O pacote em questão: 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';
. Você também pode remover o pacote de compilação src para reduzir o caminho do arquivo.
main
atributo (ponto de entrada) no package.json da sua lib? Verifique sua compilação. E como você está empacotando seu pacote lib?