ฉันได้สร้างแพคเกจ NPM ที่ค่อนข้างเล็กซึ่งประกอบด้วย ES6 คลาสที่แตกต่างกันประมาณ 5 คลาสซึ่งมีอยู่ในไฟล์เดียวแต่ละไฟล์พวกเขาทั้งหมดมีลักษณะเช่นนี้:
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 transpiled และ minified
การติดตั้งและนำเข้าแพคเกจใช้งานได้ดี แต่เมื่อฉันทำสิ่งต่อไปนี้จากรหัสลูกค้าของฉัน:
import { MyClass } from 'my-package';
ไม่เพียงแค่นำเข้า "MyClass" แต่จะนำเข้าไฟล์ทั้งหมดรวมถึงการอ้างอิงทั้งหมดของทุกคลาส (บางคลาสของฉันมีการขึ้นต่อกันมาก)
ฉันคิดว่านี่เป็นวิธีการทำงานของ webpack เมื่อคุณพยายามที่จะนำเข้าชิ้นส่วนของแพคเกจรวมแล้ว? ดังนั้นฉันจึงตั้งค่าnode_modules/my-package
webpack ในพื้นที่ของฉันเพื่อเรียกใช้ผ่าน babel แล้วลอง:
import { MyClass } from 'my-package/src/index.js';
แต่สิ่งนี้นำเข้าทุกคลาสที่ส่งออกโดย index.js สิ่งเดียวที่ดูเหมือนว่าจะทำงานในแบบที่ฉันต้องการคือถ้าฉัน:
import MyClass from 'my-package/src/my-class.js';
แต่ฉันจะค่อนข้างมาก:
- สามารถนำเข้าไฟล์ transpiled และ minified เพื่อที่ฉันไม่ต้องบอก webpack ให้เรียกใช้ babel ภายใน node_modules และ
- สามารถนำเข้าแต่ละคลาสได้โดยตรงจากจุดเข้าใช้งานของฉันแทนที่จะต้องป้อนเส้นทางไปยังแต่ละไฟล์
การปฏิบัติที่ดีที่สุดที่นี่คืออะไร คนอื่น ๆ บรรลุการตั้งค่าที่คล้ายกันอย่างไร ฉันสังเกตว่า 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's package.json ของคุณหรือไม่? ตรวจสอบในงานสร้างของคุณ และคุณจะรวมแพ็คเกจ lib ของคุณอย่างไร?