Как импортировать модули в javascript используя ES6 и Babel.js?

Читая ответ https://es.stackoverflow.com / в / 1371/353 я увидел, как возможно импортировать модули используя ES6.

Однако, согласно которому я прочитал, еще не будь осуществлен в браузерах и поэтому необходимо использовать transpiler как Babel.js.

Моя проблема сейчас состоит в том, что я тестирую пример, и еще у меня появляется эта ошибка Uncaught SyntaxError: Unexpected token import несмотря на то, что выполнил раньше npm run build как появляется в документации Вавилон CLI docs и устанавливания plugin AMD AMD plugin

Так виден каталог примера:

introducir la descripción de la imagen aquí

И это код:

src/functions.js

export function sum (a, b) {
  return a + b
}

src/main.js

'use strict'
import {sum} from 'functions'
let a = 10
let b = 5
console.log(sum(a, b))

dist/main.js

'use strict';

import { sum } from 'functions';
let a = 10;
let b = 5;
console.log(sum(a, b));

dist/main.js

export function sum(a, b) {
  return a + b;
}

index.html



  
    
    ES6 Getting Started
    
  
  
    

View the console

package.json

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "build": "babel src -d dist"
  },
  "devDependencies": {
    "babel-cli": "^6.4.5"
  }
}

4
задан 13.04.2017, 16:00
1 ответ

Я думаю, что ты не функционирует plugin, который конвертирует модули ES6 в модулях AMD

Я гарантирую, что в файле .babelrc включен plugin и ты установил пакет npm

{
    "plugins": ["transform-es2015-modules-amd"]
}

Сделав это, составив с babel, вытекающие файлы должны бы быть такими:

dist/main.js

define(['functions'], function (_functions) {
'use strict';

let a = 10;
let b = 5;
console.log((0, _functions.sum)(a, b));
});

dist/functions.js

define(["exports"], function (exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.sum = sum;

function sum(a, b) {
    return a + b;
}
});

В конце концов, чтобы загружать модули AMD, ты должен использовать requirejs, файл index.html остался бы таким

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ES6 Getting Started</title>
    <meta name="description" content="An example of how to use ES6">
  </head>
  <body>
    <p>
      View the console
    </p>
    <script data-main="dist/main" src="libs/require.js">
    </script>
  </body>
</html>
4
ответ дан 24.11.2019, 14:54
  • 1
    Я должен загружать require.js, создавать папку libs и помещать это ах и # 237; верный? – Javier Cárdenas 07.02.2016, 16:38
  • 2
    Точный @JavierC и # 225; rdenas – rsciriano 07.02.2016, 16:40
  • 3
    Совершенный, я функция и # 243; наконец! Мое сомнение сейчас, - потому что используется data-main – Javier Cárdenas 07.02.2016, 17:26
  • 4
    @JavierC и # 225; rdenas в data-main устанавливается м и # 243; dulo главный, может видеть это aqu и # 237; , в documentaci и # 243; n requirejs. podr и # 237; чтобы использовать по-другому, но эта больше основная . Tambi и # 233; n podr и # 237; схвати использовать другие librer и # 237; эксперт груза м и # 243; dulos как systemjs, которые допускают м и # 243; dulos в нескольких форматах – rsciriano 07.02.2016, 17:54