module.exports = exports["default"]ก่อนที่บาเบลจะเพิ่มบรรทัด มันไม่ทำเช่นนี้อีกต่อไป สิ่งนี้หมายความว่าอย่างไรก่อนที่ฉันจะทำ:

var foo = require('./foo');
// use foo

ตอนนี้ฉันต้องทำสิ่งนี้:

var foo = require('./foo').default;
// use foo

ไม่ใช่เรื่องใหญ่โต (และฉันเดาว่านี่คือสิ่งที่ควรจะเป็นมาตลอด) ปัญหาคือฉันมีรหัสจำนวนมากซึ่งขึ้นอยู่กับวิธีการใช้งาน (ฉันสามารถแปลงส่วนใหญ่เป็นการนำเข้า ES6 แต่ไม่ใช่ทั้งหมด) ทุกคนสามารถให้คำแนะนำเกี่ยวกับวิธีการทำงานแบบเก่าโดยไม่ต้องผ่านโครงการของฉันและแก้ไขปัญหานี้ (หรือแม้แต่คำแนะนำในการเขียน codemod เพื่อทำสิ่งนี้จะค่อนข้างลื่น)

ขอบคุณ!

ตัวอย่าง:

การป้อนข้อมูล:

const foo = {}
export default foo

ผลลัพธ์ด้วย Babel 5

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var foo = {};
exports["default"] = foo;
module.exports = exports["default"];

เอาต์พุตด้วย Babel 6 (และปลั๊กอิน es2015):

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var foo = {};
exports["default"] = foo;

module.exports = exports["default"]ขอให้สังเกตว่าที่แตกต่างในการส่งออกเป็น

แก้ไข

คุณอาจสนใจในบล็อกนี้ฉันเขียนหลังจากแก้ปัญหาเฉพาะของฉัน: โมดูล ES6 ที่เข้าใจผิด, การอัพเกรด Babel, Tears และ Solution

คุณยังสามารถใช้ปลั๊กอินนี้เพื่อทำให้exportพฤติกรรมเก่ากลับมา

หากคุณต้องการพฤติกรรมการส่งออกของ CommonJS คุณจะต้องใช้ CommonJS โดยตรง (หรือใช้ปลั๊กอินในคำตอบอื่น ๆ ) พฤติกรรมนี้ถูกลบออกเพราะทำให้เกิดความสับสนและนำไปสู่ความหมายที่ไม่ถูกต้องของ ES6 ซึ่งบางคนอาศัยเช่น

export default {
  a: 'foo'
};

แล้ว

import {a} from './foo';

ซึ่ง ES6 ไม่ถูกต้อง แต่ทำงานได้เนื่องจากพฤติกรรมการทำงานร่วมกันของ CommonJS ที่คุณกำลังอธิบาย แต่น่าเสียดายที่สนับสนุนทั้งสองกรณีเป็นไปไม่ได้และช่วยให้คนที่จะเขียนไม่ถูกต้อง ES6 .defaultเป็นปัญหาที่เลวร้ายยิ่งกว่าการที่คุณทำ

ปัญหาอื่นคือผู้ใช้ไม่คาดคิดหากพวกเขาเพิ่มการส่งออกที่มีชื่อในอนาคตเช่น

export default 4;

แล้วก็

require('./mod');
// 4

แต่

export default 4;
export var foo = 5;

แล้วก็

require('./mod')
// {'default': 4, foo: 5}

สำหรับผู้เขียนห้องสมุดคุณอาจแก้ไขปัญหานี้ได้

ฉันมักจะมีจุดเริ่มต้นที่ซึ่งเป็นจุดไฟล์ฉันไปจากสนามหลักในindex.js package.jsonไม่ทำอะไรเลยนอกจากส่งออกจุดเข้าใช้งานจริงของ lib อีกครั้ง:

export { default } from "./components/MyComponent";

เพื่อแก้ไขปัญหาเกี่ยวกับ Babel ฉันเปลี่ยนสิ่งนี้เป็นimportคำสั่งแล้วกำหนดค่าเริ่มต้นเป็นmodule.exports:

import MyComponent from "./components/MyComponent";
module.exports = MyComponent;

ไฟล์อื่น ๆ ของฉันยังคงเป็นโมดูล ES6 แท้ๆโดยไม่มีวิธีแก้ไข ดังนั้นจุดเข้าใช้งานต้องมีการเปลี่ยนแปลงเล็กน้อย :)

สิ่งนี้จะใช้ได้กับ commonjs ที่ต้องการและสำหรับการนำเข้า ES6 เพราะดูเหมือนว่า Babel จะไม่ได้ลดการเชื่อมต่อแบบย้อนกลับ (commonjs -> es6) Babel ฉีดฟังก์ชันต่อไปนี้เพื่อแก้ไข commonjs:

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 

ฉันใช้เวลาหลายชั่วโมงในการต่อสู้กับสิ่งนี้ดังนั้นฉันหวังว่าสิ่งนี้จะช่วยคนอื่นได้อีก!

ฉันมีปัญหาแบบนี้ และนี่คือทางออกของฉัน:

//src/arithmetic.js

export var operations = {
  add: function (a, b) {
      return a + b;
  },

  subtract: function (a, b) {
      return a - b;
  }
};

//src/main.js

import { operations }  from './arithmetic';

let result = operations.add(1, 1);

console.log(result);