System.import kehrt leeres Objekt

Ich habe ein einfaches Modul mit SystemJS und dynamischem Laden von Modulen in Javascript zu spielen:System.import kehrt leeres Objekt

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

Diese Datei mit meiner webpack Konfiguration an folgenden verarbeitet wird (ist ich das richtig ist, was ? ist "Modul") genannt:

/******/ (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'); 
} 

/***/ } 

/******/ });

ich habe gemacht, die von meiner Web-Anwendung zugänglich Datei:

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

Dann habe ich <script src="js/system.js" type="text/javascript"></script> innerhalb einer Seite <head> Tag, und schreiben Sie in der Konsole:

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

die Datei herunterlädt (ich sehe es durch Browser Entwickler-Tools), aber Ausgänge leeres Objekt in die Konsole. Weder m.default noch m.test retourniert irgendetwas außer undefined.

Ich erwarte, nach dem Importieren test aufrufen zu können, was mache ich falsch?

Quelle

2017-01-01 Aeteros

webpack verwendet System.import statt SystemJS.import. Wenn Sie das neueste Webpack RC verwenden, empfehlen wir Ihnen, stattdessen die native Spezifikation import() zu verwenden.

Hier ist ein Beispiel aus unserem Github Repo, wie man es benutzt. https://github.com/webpack/webpack/blob/master/examples/code-splitting-harmony/README.md

Quelle

2017-01-01 19:37:08

Danke für die Antwort! Scheint so, als ob alle möglichen Kandidaten mit wepack verarbeitet werden müssten (mein test.js Modul wurde 0.bundle.js). Wenn ich es dann importiere, lädt es das Modul von /0.bundle.js herunter. Das ist jetzt klar. Was aber, wenn ich nicht alle meine Module offenlegen und sie von einer benutzerdefinierten URL importieren möchte, indem ich eine Serverlogik, z. Zugangskontrolle? Ist es möglich? – Aeteros

Sie könnten publicPath verwenden und eine CDN-URL festlegen. Wenn du das meinst. –

Richtig, publicPath erlaubt mir URLs zu setzen, von denen sie Chunks dynamisch laden. Aber ich kann nicht identifizieren, welche Quelle .JS-Datei es entspricht: 'test.js' wurde' 0.bundle.js'. Wie kann ich herausfinden, was die ursprüngliche Quelldatei ist? – Aeteros

System.import kehrt leeres Objekt

Antwort

Verwandte Themen