Nhận xuất mã thông báo bất ngờ

Tôi đang cố chạy một số mã ES6 trong dự án của mình nhưng tôi gặp phải lỗi xuất mã thông báo không mong muốn.

export class MyClass {
  constructor() {
    console.log("es6");
  }
}

Bạn đang sử dụng cú pháp Mô-đun ES6.

Điều này có nghĩa là môi trường của bạn (ví dụ: node.js) phải hỗ trợ cú pháp Mô-đun ES6.

NodeJS sử dụng cú pháp Mô-đun CommonJS ( module.exports) chứ không phải cú pháp mô-đun ES6 ( exporttừ khóa).

Giải pháp:

• Sử dụng babelgói npm để dịch mã ES6 của bạn sang commonjsmục tiêu

hoặc là

• Tái cấu trúc với cú pháp CommonJS.

Ví dụ về cú pháp CommonJS là (từ flaviocopes.com/commonjs/ ):

• exports.uppercase = str => str.toUpperCase()
• exports.a = 1

Trong trường hợp bạn gặp lỗi này, nó cũng có thể liên quan đến cách bạn đưa tệp javascript vào trang html của bạn. Khi tải các mô-đun, bạn phải khai báo rõ ràng các tệp như vậy. Dưới đây là một ví dụ:

//module.js:
function foo(){
   return "foo";
}

var bar = "bar";

export { foo, bar };

Khi bạn bao gồm tập lệnh như thế này:

<script src="module.js"></script>

Bạn sẽ nhận được lỗi:

Uncaught SyntaxError: Xuất khẩu mã thông báo bất ngờ

Bạn cần bao gồm tệp với thuộc tính loại được đặt thành "mô-đun":

<script type="module" src="module.js"></script>

Và sau đó nó sẽ hoạt động như mong đợi và bạn đã sẵn sàng nhập mô-đun của mình vào một mô-đun khác:

import { foo, bar } from  "./module.js";

console.log( foo() );
console.log( bar );

Theo quan điểm của tôi

Xuất khẩu

ES6

myClass.js

export class MyClass1 {
}
export class MyClass2 {
}

other.js

import { MyClass1, MyClass2 } from './myClass';

Thay thế CommonJS

myClass.js

class MyClass1 {
}
class MyClass2 {
}
module.exports = { MyClass1, MyClass2 }
// or
// exports = { MyClass1, MyClass2 };

other.js

const { MyClass1, MyClass2 } = require('./myClass');

Xuất mặc định

ES6

myClass.js

export default class MyClass {
}

other.js

import MyClass from './myClass';

Thay thế CommonJS

myClass.js

module.exports = class MyClass1 {
}

other.js

const MyClass = require('./myClass');

Hi vọng điêu nay co ich

Để sử dụng ES6 thêm babel-preset-env

và trong .babelrc:

{
  "presets": ["@babel/preset-env"]
}

Trả lời cập nhật nhờ bình luận @ Afghanistanbari để áp dụng babel 7.

Không cần sử dụng Babel tại thời điểm này (JS đã trở nên rất mạnh mẽ) khi bạn chỉ cần sử dụng xuất khẩu mô-đun JavaScript mặc định. Kiểm tra hướng dẫn đầy đủ

Message.js

module.exports = 'Hello world';

app.js

var msg = require('./Messages.js');

console.log(msg); // Hello World

Cài đặt các gói babel @babel/corevà @babel/presetsẽ chuyển ES6 thành mục tiêu chung vì nút js không hiểu trực tiếp các mục tiêu ES6

npm install --save-dev @babel/core @babel/preset-env

Sau đó, bạn cần tạo một tệp cấu hình có tên .babelrctrong thư mục gốc của dự án của bạn và thêm mã này vào đó

{ "presets": ["@babel/preset-env"] }

Tôi đã sửa lỗi này bằng cách tạo một tệp điểm như thế nào.

// index.js
require = require('esm')(module)
module.exports = require('./app.js')

và bất kỳ tệp nào tôi đã nhập bên trong app.jsvà ngoài hoạt động với imports/exports bây giờ bạn chỉ cần chạy nó nhưnode index.js

Lưu ý: nếu app.jssử dụng export default, điều này trở thành require('./app.js').defaultkhi sử dụng tệp điểm nhập cảnh.

Sử dụng cú pháp ES6 không hoạt động trong nút, thật không may, bạn phải có babel rõ ràng để làm cho trình biên dịch hiểu cú pháp như xuất hoặc nhập.

npm install babel-cli --save

Bây giờ chúng ta cần tạo tệp .babelrc, trong tệp babelrc, chúng ta sẽ đặt babel sử dụng cài đặt sẵn es2015 mà chúng ta đã cài đặt làm cài đặt sẵn khi biên dịch sang ES5.

Tại thư mục gốc của ứng dụng, chúng tôi sẽ tạo tệp .babelrc. $ npm cài đặt babel-preset-es2015 --save

Tại thư mục gốc của ứng dụng, chúng tôi sẽ tạo tệp .babelrc.

{  "presets": ["es2015"] }

Hy vọng nó hoạt động ... :)