2017-08-01 178 views
1

我試圖使用作爲一個單一的水療中心應用程序(https://github.com/CanopyTax/single-spa),但我無法加載js文件assets/vendor.js,資產/ember-app.js正確使用systemJS。加載應用程序中的應用程序作爲單應用程序中的子應用程序

步驟來重現問題:

1)與Ember

git clone [email protected]:CanopyTax/single-spa-examples.git 
cd single-spa-examples 
cd src 
ember new ember-app 
cd ember-app 
npm install 

2設置單一溫泉爲例)添加骨架單一溫泉掛鉤方法燼(未完成,但現在應該是確定的)

//src/ember-app/public/assets/apa.app.js 
export async function bootstrap() { 
    return new Promise((resolve, reject) => { 
    resolve(); 
    }); 
} 

export async function mount() { 
    return new Promise((resolve, reject) => { 
    resolve(); 
    }); 
} 

export async function unmount() { 
    return new Promise((resolve, reject) => { 
    resolve(); 
    }); 
} 

function cleanupInspector() { 
    return new Promise((resolve, reject) => { 
    resolve(); 
    }); 
} 

2a)爲燼應用添加佔位符div。

#in single-spa-example-master/index.html add 
<div id="ember-app"></div> 

2B)的餘燼環境添加rootElement的屬性

#in src/ember-app/config/environment.js 
APP: { 
     // Here you can pass flags/options to your application instance 
     // when it is created 
     rootElement: '#ember-app' 
    } 

3)添加構建腳本用於單礦泉(添加斌/集結emberjs)

#!/usr/bin/env bash 
set -e 

cd src/ember-app 
npm install 
ember build 
cd .. 
cd .. 
rm -rf build/ember-app 
cp -a src/ember-app/dist build/ember-app 

./node_modules/jspm/jspm.js build \ 
    src/ember-app/public/assets/spa.app.js \ 
    - common/colored-border.js \ 
    build/ember.app.js \ 
    --format amd \ 
    --source-map-contents \ 
    --skip-rollup \ 
    "[email protected]" 

4)添加構建作爲構建代碼的一部分

#!/usr/bin/env bash 
set -e 

rm -rf build 
mkdir build 

cp jspm_packages/system.src.js build/system.src.js 
cp jspm_packages/system-polyfills.src.js build/system-polyfills.src.js 

./bin/build-root 
./bin/build-common-deps 

./bin/build-home 
./bin/build-navbar 
./bin/build-angular1 
./bin/build-react -p 
./bin/build-angular2 
./bin/build-vue 
./bin/build-svelte 
./bin/build-preact 
./bin/build-vanillajs 
./bin/build-inferno 
./bin/build-emberjs 

5)申報燼應用視爲面向兒童的應用程序和運行應用程序

//src/single-spa-examples.js 
singleSpa.declareChildApplication('ember',()=> { 
    /**ISSUE: ember-app.js does not get loaded*/ 
    return SystemJS.import('/build/ember-app/assets/vendor.js').then(function() { 
     return SystemJS.import('/build/ember-app/assets/ember-app.js'); 
    }); 

    /* 
    return Promise.all([ 
     SystemJS.import('/build/ember-app/assets/vendor.js'), 
     SystemJS.import('/build/ember-app/assets/ember-app.js') 
    ])*/ 
}, hashPrefix('/ember')); 

6)啓動應用程序

npm install 
npm start 

7)去燼應用在http://localhost:8080/#/ember

問題:

1)vendor.js文件加載但ember-app.js文件未加載(可在Chrome網絡標籤中驗證)

child-app-errors.js:12 Uncaught Error: 'ember' died in status LOADING_SOURCE_CODE: (SystemJS) Cannot read property 'Ember' of undefined 
    TypeError: Cannot read property 'Ember' of undefined 
     at eval (http://localhost:8080/build/ember-app/assets/vendor.js!transpiled:10200:38) 
     at eval (http://localhost:8080/build/ember-app/assets/vendor.js!transpiled:10301:11) 
     at execute (http://localhost:8080/build/ember-app/assets/vendor.js!transpiled:64708:9) 
    Error loading http://localhost:8080/build/ember-app/assets/vendor.js 
     at eval (http://localhost:8080/build/ember-app/assets/vendor.js!transpiled:10200:38) 
     at eval (http://localhost:8080/build/ember-app/assets/vendor.js!transpiled:10301:11) 
     at execute (http://localhost:8080/build/ember-app/assets/vendor.js!transpiled:64708:9) 
    Error loading http://localhost:8080/build/ember-app/assets/vendor.js 

2)在步驟5中,如果我將代碼替換爲註釋版本,那麼我會得到以下錯誤(相信它是因爲應該按特定順序加載文件,因爲「runningTests」是在vendor.js文件中定義的):

child-app-errors.js:12 Uncaught Error: 'ember' died in status LOADING_SOURCE_CODE: (SystemJS) runningTests is not defined 
    ReferenceError: runningTests is not defined 
     at eval (http://localhost:8080/build/ember-app/assets/ember-app.js:294:1) 
     at eval (http://localhost:8080/build/ember-app/assets/ember-app.js:299:3) 
     at eval (<anonymous>) 
     at tryCatchReject (http://localhost:8080/build/system-polyfills.src.js:1188:30) 
     at runContinuation1 (http://localhost:8080/build/system-polyfills.src.js:1147:4) 
     at Fulfilled.when (http://localhost:8080/build/system-polyfills.src.js:935:4) 
    Evaluating http://localhost:8080/build/ember-app/assets/ember-app.js 
    Error loading http://localhost:8080/build/ember-app/assets/ember-app.js 
     at eval (http://localhost:8080/build/ember-app/assets/ember-app.js:294:1) 
     at eval (http://localhost:8080/build/ember-app/assets/ember-app.js:299:3) 
     at eval (<anonymous>) 
     at tryCatchReject (http://localhost:8080/build/system-polyfills.src.js:1188:30) 
     at runContinuation1 (http://localhost:8080/build/system-polyfills.src.js:1147:4) 
     at Fulfilled.when (http://localhost:8080/build/system-polyfills.src.js:935:4) 
    Evaluating http://localhost:8080/build/ember-app/assets/ember-app.js 
    Error loading http://localhost:8080/build/ember-app/assets/ember-app.js 

回答

1

感謝您的明確描述和重現步驟!我能夠完成所有步驟並獲得與您報告的完全相同的錯誤。

您所看到的tldr是SystemJS不知道如何正確執行ember-app.js和vendor.js包。

更長的解釋:當SystemJS下載這些包的代碼時,它會在代碼上運行一個正則表達式來查看它的格式。vendor.js文件結合了amd,cjs和esm模塊的語法,但SystemJS決定將這些包解釋爲esm(es6)模塊語法。然後它將代碼轉換爲System.register格式,並強制代碼在JavaScript嚴格模式下以"use strict"語句執行。一旦進入嚴格模式,代碼以不同的上下文運行(this),這就是爲什麼this.Ember導致錯誤Cannot read property 'Ember' of undefined。讓我知道你是否想要更多細節,或者是否沒有意義。我花了一段時間才找到,但我相信我現在明白了,如果你願意,我可以給你更多的細節。這就是說,所有這些在SystemJS的腸子裏都非常深刻,並且從單一SPA的工作方式中脫離出來。

如果你只是想看看單水療中心應用程序裏面運行Ember的內容,我會在https://github.com/CanopyTax/single-spa-examples/pull/37#pullrequestreview-53690825的地方查看我在哪裏解決了這個問題。另請參閱https://github.com/CanopyTax/single-spa-examples/issues/33#issuecomment-319359153以及相關討論。

相關問題