วิธีการส่งออกโมดูล ES6 หลายโมดูลจากแพ็คเกจ NPM หนึ่งแพค


16

ฉันได้สร้างแพคเกจ 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-packagewebpack ในพื้นที่ของฉันเพื่อเรียกใช้ผ่าน babel แล้วลอง:

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

แต่สิ่งนี้นำเข้าทุกคลาสที่ส่งออกโดย index.js สิ่งเดียวที่ดูเหมือนว่าจะทำงานในแบบที่ฉันต้องการคือถ้าฉัน:

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

แต่ฉันจะค่อนข้างมาก:

  1. สามารถนำเข้าไฟล์ transpiled และ minified เพื่อที่ฉันไม่ต้องบอก webpack ให้เรียกใช้ babel ภายใน node_modules และ
  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
คุณได้เพิ่มคุณสมบัติmain(จุดเข้า) ใน lib's package.json ของคุณหรือไม่? ตรวจสอบในงานสร้างของคุณ และคุณจะรวมแพ็คเกจ lib ของคุณอย่างไร?
Abhishek

คุณสมบัติหลักของ package.json เป็นทิศทางไปยังจุดเข้าสู่โมดูลที่ package.json กำลังอธิบาย ในแอ็พพลิเคชัน Node.js เมื่อโมดูลถูกเรียกผ่านคำสั่ง require การเอ็กซ์พอร์ตของโมดูลจากไฟล์ที่มีชื่อในคุณสมบัติหลักจะเป็นสิ่งที่ส่งคืนไปยังแอ็พพลิเคชัน Node.js
Abhishek

ใช่คุณสมบัติหลักชี้ไปที่ index.js ของฉันซึ่งส่งออกคลาสอื่นทั้งหมด ฉันรวมไฟล์หลัก / index.js โดยใช้ webpack และ babel ทุกอย่างอธิบายในคำถาม
powerbuoy

นี่อาจช่วยคุณได้ - danielberndt.net/blog/2018/…
Abhishek

คุณยังสามารถที่สร้างการดำเนินงานของพวกเขา - github.com/mui-org/material-ui/blob/master/packages/material-ui/...import { MyClass } from 'my-package/src/MyClass';เพื่อให้มีการสร้างขนาดสั้นดีกว่าที่จะทำ คุณยังสามารถลบ src บิลด์แพ็กเกจเพื่อทำให้พา ธ ของไฟล์สั้นลง
Abhishek

คำตอบ:


1

ฉันคิดว่านี่เป็นวิธีการทำงานของ webpack เมื่อคุณพยายามที่จะนำเข้าชิ้นส่วนของแพคเกจรวมแล้ว?

ใช่วิธีการตั้งค่าของคุณคือการนำเข้าทุกคลาสใน index.js ซึ่งจะถูกแปลงเป็นไฟล์เดียว (ถ้าเป็นเป้าหมาย ES5 ซึ่งเป็นเรื่องธรรมดามากที่สุด *) ซึ่งหมายความว่าเมื่อไฟล์นั้นถูกนำเข้าในไฟล์อื่นไฟล์นั้นจะมาพร้อมกับคลาสทั้งหมดเหล่านั้น

หากคุณต้องการการเขย่าต้นไม้ที่เหมาะสมคุณควรหลีกเลี่ยงการ transpiling ให้เป็นชุด CommonJS (ES5) ข้อเสนอแนะของฉันคือการรักษาโมดูล ES6 ไม่ว่าจะด้วยตัวเองหรือในสถานที่แยกต่างหากจากบันเดิล ES5 บทความนี้จะช่วยให้คุณเข้าใจอย่างถ่องแท้และมีคำแนะนำที่แนะนำ โดยพื้นฐานมันเดือดลงไปตั้งค่าสภาพแวดล้อมที่บาเบลที่ตั้งไว้โดยใช้-env (ขอแนะนำถ้าคุณไม่ได้ใช้มัน!) เพื่อรักษาไวยากรณ์ ES6 นี่คือการกำหนดค่า Babel ที่เกี่ยวข้องหากคุณไม่ต้องการ transpile เป็น ES5:

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

บทความนี้มีรายละเอียดวิธีการตั้งค่า 2 บันเดิลโดยแต่ละโมดูลใช้ไวยากรณ์ที่แตกต่างกัน

นอกจากนี้ยังเป็นที่น่าสังเกตและมีการกล่าวถึงในบทความด้วยเช่นกันคุณสามารถตั้งค่าจุดเข้าใช้งานโมดูล ESใน package.json ที่บอก Webpack / Babel ว่าสามารถหาโมดูล ES6 ได้ที่ไหนซึ่งอาจเป็นสิ่งที่คุณต้องการสำหรับกรณีการใช้งานของคุณ ดูเหมือนภูมิปัญญาดั้งเดิมบอกว่าจะทำ:

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

แต่เอกสารโหนดมีมันเป็น:

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

ถ้าฉันมีเวลาฉันจะลองเล่นดูเรื่องนี้ดูว่ามันทำงานได้ถูกต้อง แต่มันก็เพียงพอที่จะทำให้คุณอยู่ในเส้นทางที่ถูกต้อง


* บันเดิลที่กำหนดเป้าหมาย ES5 อยู่ในรูปแบบ CommonJS ซึ่งจะต้องรวมไฟล์ที่เกี่ยวข้องทั้งหมดเนื่องจาก ES5 ไม่มีการสนับสนุนโมดูลเนทิฟ ที่มาใน ES2015 / ES6


ฉันลองเพิ่มtargets.esmodules: trueและในขณะที่ทำการเปลี่ยนแปลงสคริปต์ที่สร้างขึ้นก็ไม่ได้เปลี่ยนแปลงตามสิ่งที่นำเข้าในตอนท้าย การนำเข้าชั้นเดียวจากmy-packageยังคงนำเข้าทุกอย่าง ฉันได้ลองทำการเปลี่ยนแปลงด้วยpackage.json(พร้อมกับการเปลี่ยนแปลงอื่น ๆ ) และนั่นก็ไม่เปลี่ยนแปลงอะไรเลย การเพิ่มการtype: moduleบิลด์ของฉันด้วย "ต้องใช้การนำเข้าเพื่อโหลดโมดูล ES: /sleek-ui/webpack.config.js ต้องการ () ของโมดูล ES ไม่ได้รับการสนับสนุน" ดังนั้นฉันต้องลบบิตนั้น ฉันจะดูที่บทความที่เชื่อมโยง
powerbuoy

ตกลงดังนั้นบทความบอกให้ฉันตั้งmodules: false(ไม่ใช่ภายในtargets) แต่มันก็ไม่ได้ผลเช่นกัน ... ฉันคิดว่าฉันจะนำเข้าโดยตรงจากไฟล์ต้นฉบับและรัน Babel ผ่าน node_modules จนกว่าเราจะสามารถใช้สิ่งนี้ได้
powerbuoy

@powerbuoy การนำเข้าจากไฟล์ต้นฉบับทำงานได้ บางทีมันอาจจะไม่ได้ชัดเจนจากการโพสต์ของฉันและถ้าเป็นกรณีที่ฉันสามารถแก้ไขได้ import MyClass from 'my-package/myClass';แต่คุณต้องการที่จะนำเข้าเฉพาะชั้นเรียนเช่น เป็นตัวอย่างที่ดี repo นี้เป็น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'จากนั้นคุณสามารถทำได้ peasy ง่าย ๆ

มีความสุข!


นี่คือสิ่งที่ฉันทำอยู่แล้วซึ่งฉันคิดว่าค่อนข้างชัดเจนในคำถาม
powerbuoy
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.