System.import возвращает пустой объект

У меня есть простой модуль, чтобы играть с SystemJS и динамической загрузки модуля в JavaScript:System.import возвращает пустой объект

export default function test() { 
    alert('test'); 
}

Этот файл обрабатывается с моей конфигурации WebPack к следующему (я прав, что есть что называется "модуль"):

/******/ (function(modules) { // webpackBootstrap 
/******/ // The module cache 
/******/ var installedModules = {}; 

/******/ // The require function 
/******/ function __webpack_require__(moduleId) { 

/******/  // Check if module is in cache 
/******/  if(installedModules[moduleId]) 
/******/   return installedModules[moduleId].exports; 

/******/  // Create a new module (and put it into the cache) 
/******/  var module = installedModules[moduleId] = { 
/******/   i: moduleId, 
/******/   l: false, 
/******/   exports: {} 
/******/  }; 

/******/  // Execute the module function 
/******/  modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 

/******/  // Flag the module as loaded 
/******/  module.l = true; 

/******/  // Return the exports of the module 
/******/  return module.exports; 
/******/ } 


/******/ // expose the modules object (__webpack_modules__) 
/******/ __webpack_require__.m = modules; 

/******/ // expose the module cache 
/******/ __webpack_require__.c = installedModules; 

/******/ // identity function for calling harmony imports with the correct context 
/******/ __webpack_require__.i = function(value) { return value; }; 

/******/ // define getter function for harmony exports 
/******/ __webpack_require__.d = function(exports, name, getter) { 
/******/  if(!__webpack_require__.o(exports, name)) { 
/******/   Object.defineProperty(exports, name, { 
/******/    configurable: false, 
/******/    enumerable: true, 
/******/    get: getter 
/******/   }); 
/******/  } 
/******/ }; 

/******/ // getDefaultExport function for compatibility with non-harmony modules 
/******/ __webpack_require__.n = function(module) { 
/******/  var getter = module && module.__esModule ? 
/******/   function getDefault() { return module['default']; } : 
/******/   function getModuleExports() { return module; }; 
/******/  __webpack_require__.d(getter, 'a', getter); 
/******/  return getter; 
/******/ }; 

/******/ // Object.prototype.hasOwnProperty.call 
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 

/******/ // __webpack_public_path__ 
/******/ __webpack_require__.p = ""; 

/******/ // Load entry module and return exports 
/******/ return __webpack_require__(__webpack_require__.s = 445); 
/******/ }) 
/************************************************************************/ 
/******/ ({ 

/***/ 445: 
/***/ function(module, exports) { 

"use strict"; 
'use strict'; 

Object.defineProperty(exports, "__esModule", { 
    value: true 
}); 
exports.default = test; 
function test() { 
    alert('test'); 
} 

/***/ } 

/******/ });

Я сделал этот файл доступен из моего веб-приложения:

Request URL:http://localhost:8080/test 
Request Method:GET 
Status Code:200 
Remote Address:[::1]:8080 
Response Headers 
view source 
Cache-Control:no-cache, no-store, max-age=0, must-revalidate 
Content-Length:2672 
Date:Sun, 01 Jan 2017 16:34:54 GMT 
Expires:0 
Pragma:no-cache 
X-Content-Type-Options:nosniff 
X-Frame-Options:DENY 
X-XSS-Protection:1; mode=block 
Request Headers 
view source 
Accept:application/x-es-module, */* 
Accept-Encoding:gzip, deflate, sdch, br 
Accept-Language:ru-RU,ru;q=0.8,en-US;q=0.6,en;q=0.4 
Connection:keep-alive 
Cookie:XSRF-TOKEN=ac781d41-fdd4-4bae-9290-e54e960dfa8d; JSESSIONID=57B0C1DDA88DE1D6D4031CC8BCBCCBC9 
Host:localhost:8080 
Referer:http://localhost:8080/ 
User-Agent:Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36

Затем я добавил <script src="js/system.js" type="text/javascript"></script> внутри страницы <head> тега, и написать в консоли:

SystemJS.import('./test').then(m => console.log(m))

, который загружает файл (я вижу его через браузер Дев инструментов), но выходы пустой объект в консоли. Ни m.default, либо m.test не возвращает ничего, кроме неопределенного.

Ожидает, что вы сможете позвонить test после импорта, что я делаю неправильно?

источник

2017-01-01 Aeteros

webpack использует System.import, а не SystemJS.import. Кроме того, если вы используете новейший webpack RC, мы рекомендуем вместо этого использовать собственный spec import().

Вот пример из нашего репетитора github о том, как его использовать. https://github.com/webpack/webpack/blob/master/examples/code-splitting-harmony/README.md

источник

2017-01-01 19:37:08

Спасибо за ответ! Похоже, это требует, чтобы все возможные кандидаты обрабатывались с помощью wepack (мой модуль test.js стал 0.bundle.js). Затем, когда я импортирую, он загружает модуль из /0.bundle.js. Теперь ясно. Но что, если я хочу не выставлять все мои модули и импортировать их из пользовательского URL-адреса, выполняя некоторую логику сервера, например. проверка доступа? Является ли это возможным? – Aeteros

Вы можете использовать publicPath и установить URL-адрес CDN. Если ты это имеешь в виду. –

Правильно, publicPath позволяет мне устанавливать URL-адрес, где он динамически загружает куски. Но я не могу определить, какой источник .js-файла ему соответствует: 'test.js' стал' 0.bundle.js'. Как я могу выяснить, что было исходным исходным файлом? – Aeteros

System.import возвращает пустой объект

ответ

Смежные вопросы