ES6 Экспорт и импорт функции

Если у меня есть JS-файл ES6 (test.js)...

export default function() {
  let foo = "test"
  return foo
}

С помощью Babel можно ли преобразовать и вызвать его в файле index.html

<script src="js/text-min.js"></script>

И начать использовать функцию без необходимости импортировать ее в другой файл js? Для экс. следующий тег script после будет иметь следующий код. Это используется с Webpack --

<script>
  var bar = new foo();
  console.log(bar);
</script>

javascript babeljs es6-modules ecmascript-6 script-tag
person Yasir    schedule 13.10.2016    source источник
comment
Конечно, используйте параметры, чтобы выставить значение по умолчанию в качестве переменной по вашему выбору.   -  person Bergi    schedule 13.10.2016

Ответы (3)


arrow_upward
0
arrow_downward

Транспилированная версия приведенного выше кода выглядит следующим образом:

"use strict";

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

  exports.default = function () {
     var foo = "test";
     return foo;
  };

Как видите, он добавляет свойство для объекта экспорта с именем __esModule. Ничего больше. Таким образом, у вас нет возможности включить эту функцию по умолчанию без использования import или require.

person jforjs    schedule 13.10.2016
comment
если я хочу сделать плагин для переноса одного файла, в этом случае должен быть импорт перед транспилированием? можно ли будет получить доступ к свойствам в виде файла? - person Yasir; 14.10.2016
comment
если я использую babel/webpack для преобразования в один файл, можно ли затем прикрепить как скрипт и методы доступа из сжатого файла в другом файле? - person Yasir; 14.10.2016
comment
@Yasir Итак, вы используете веб-пакет? Ты должен был это заявить. - person Bergi; 14.10.2016

arrow_upward
0
arrow_downward

На самом деле вы ищете глобальную переменную (что, вероятно, не очень хорошая идея). Например:

Модуль 1:

import {foo} from 'foo'; // still an ES6 module, just no export

// global variable 'bar'
window.bar = (...args) => foo(...args) + 6;

Затем в Модуле 2:

bar(1, 3, 5);

Обратите внимание, что это сводит на нет весь смысл использования модулей и должно использоваться очень экономно.

person Jared Smith    schedule 13.10.2016
comment
это имеет смысл. предполагаемый конечный вариант использования — рассматривать es6 как es5 js, который вы добавляете через тег сценария. идея в том, что у вас есть способ es6, экспорт/импорт и стандартный способ es5. предназначен для использования в качестве плагина. - person Yasir; 13.10.2016
comment
будет интересно посмотреть, как все это будет взаимодействовать, когда некоторые браузеры начнут выпускать реальные реализации. - person Jared Smith; 13.10.2016

arrow_upward
0
arrow_downward

Итак, я решил эту проблему, предоставив выходную переменную с помощью Webpack. Отличная статья, которая говорит об этом -- http://siawyoung.com/coding/javascript/exporting-es6-modules-as-single-scripts-with-webpack.html

person Yasir    schedule 13.10.2016