BabelJS類使用繼承時的排序

我想找到一種方法使babel加載文件按特定的順序，以便超類在子類之前加載。BabelJS類使用繼承時的排序

給出下面的文件的一個例子：

SRC/fruit.js：

export class Fruit{ 
    constructor(color){ 
     this._color = color; 
    } 
}

SRC/apple.js：

export class Apple extends Fruit{ 
    constructor(){ 
     super("green"); 
    } 
}

SRC/xecute.js：

var theApple = new Apple();

package.json

{ 
    "name": "fruit", 
    "version": "1.0.0", 
    "description": "Fruit JS", 
    "scripts": { 
    "build": "babel src -o out/fruit-bundle.js" 
    }, 
    "author": "Toby Nilsen", 
    "license": "MIT", 
    "devDependencies": { 
    "babel-cli": "^6.22.2", 
    "babel-preset-es2015": "^6.5.0" 
    } 
}

.babelrc：

{ 
    "presets": ["es2015"] 
}

當我編譯我的文件下面的命令

npm run build

而且隨着運行我出/水果bundle.js：

node out\fruit-bundle.js

我得到了follwing錯誤：

TypeError: Super expression must either be null or a function, not undefined

這是因爲babel在fruit.js之前解析了apple.js。我可以通過將我的文件重命名爲0_fruit.js和1_apple.js來解決這個問題，但是我想知道是否有任何方法讓babel解決依賴關係並對輸出進行排序，以便首先加載超類。

來源

2017-03-18 Toby

「*是任何方式爲babel解決依賴關係*」 - 它已經這樣做自動。你的問題是你忘了**在'apple.js'中聲明依賴關係** - 你需要從'。/ fruit.js''導入{Fruit}！ – Bergi

巴別爾只是一個翻譯。它只是翻譯語法，但它不會爲你捆綁。您需要一個捆綁器才能以正確的順序解決依賴關係。考慮檢出Rollup或Webpack。與彙總，去最簡單的方式做到這一點，而不緩存和其他構建優化要麼是：

運行彙總捆綁然後一切在一個文件上彙總的輸出運行通天塔。
在所有文件上運行Babel，然後使用Rollup將它們全部捆綁在一起。

另外，爲了讓打包者知道正確的順序，從Apple導入Fruit。

import Fruit from 'fruit'; 

export class Apple extends Fruit{ 
    constructor(){ 
     super("green"); 
    } 
}

來源

2017-03-18 16:55:58 Joseph

感謝您的回答。 :)但從正如你可以看到的例子中，babel已經將這些文件捆綁到一個fruit-bundle.js（ES5）中。即使我之後使用了另一個捆綁器，比如webpack，現有捆綁包中的內容也不會重新排列，即使我嘗試使用import語句，問題也會持續存在。 – Toby

「*即使我之後使用另一個捆綁器，說webpack，現有捆綁包內的內容將不會重新排列*」 - 這是不正確的。但正如答案所說，babel只是將代碼進行轉譯，並且如果您的輸出是一個文件，它就會將它們放在一起。您應該指定一個輸出目錄而不是單個文件並使用導入（導入語句不會更改，但目錄結構保持不變）。 –

BabelJS類使用繼承時的排序

回答

相關問題