Tak więc, uczę się ES2015 tutaj:
http://k33g.github.io/2015/05/02/ES6.html
Ale nie mogę znaleźć tego pliku na podstawie tego samouczka:
node_modules/babel-core/browser.js
Gdzie mogę uzyskać browser.js? Ponieważ po wykonaniu:
npm install babel-core
są 2 przeglądarki.js w node_modulesbabel-core
1 node_modulesbabel-corelibapiregisterbrowser.js
2 node_modulesbabel-corelibapibrowser.js
Który powinienem skopiować?
Odpowiedzi:
7 dla odpowiedzi № 1Od babel 6.2.0 browser.js zostało usunięte.
Następujący Dokumentacja Babelmasz dwie opcje:
1. Użyj babel-standalone:
Jest to samodzielna wersja Babel do użytku w środowiskach innych niż Node.js, w tym w przeglądarkach. Jest to zamiennik babel-browser i jest używany w oficjalnej Babel repl
2. Dołącz własny plik:
Użyj programu pakującego, takiego jak browserify / webpack i wymagaj bezpośrednio babel-core moduł npm i upewnij się, że poprawnie skonfigurujesz przeglądarkę internetową lub pakiet WWW, aby uniknąć błędów spowodowanych czystymi zależnościami między węzłami i tak dalej.
Przykład konfiguracji za pomocą webpacka (zostawiłem tylko jeden konkretny):
{
...
module: {
loaders: [
...
{
loader: "json-loader",
test: /.json$/
}
]
},
node: {
fs: "empty",
module: "empty",
net: "empty"
}
}
Następnie w swoim kodzie:
import {transform} from "babel-core";
import es2015 from "babel-preset-es2015";
import transformRuntime from "babel-plugin-transform-runtime";
...
transform(
/* your ES6 code */,
{
presets: [es2015],
plugins: [transformRuntime]
}
)
...
Pamiętaj, że wtyczki i ustawienia muszą być wymagane od kodu i nie mogą być przekazywane jako opcja ciągu.
6 dla odpowiedzi nr 2
Transpilacja w przeglądarce została usunięta z Babel 6, jednak Daniel15 stworzył samodzielną kompilację do użytku w „środowiskach innych niż Node.js, włączając przeglądarki” tutaj:
https://github.com/Daniel15/babel-standalone
Wszystko, co musisz zrobić, to dodać to odniesienie do swojej strony:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>
A następnie upewnij się, że używasz script type="text/babel" atrybut w odniesieniach do innych plików skryptów.
5 dla odpowiedzi nr 3
Przykład asynchronizacji / czekania przy użyciu samodzielnego Babel!
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Standalone Async/Await Example</h1>
<!-- Load Babel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.14.0/babel.min.js"></script>
<script type="text/babel" data-presets="es2017, stage-3" data-plugins="syntax-async-functions">
/* Output of Babel object */
console.log("Babel =", Babel);
var users = { "123" : { name : "Joe Montana"} };
process();
async function process()
{
var id = await getId();
console.log("User ID: "+id);
var name = await getUserName(id);
console.log("User Name: "+name);
}
function getId()
{
return new Promise((resolve, reject) => {
setTimeout(() => { console.log("calling"); resolve("123"); }, 2000);
});
}
function getUserName(id)
{
return new Promise((resolve, reject) => {
setTimeout(() => { console.log("requesting user name with id: "+id); resolve(users[id].name); }, 3000);
});
}
</script>
</body>
</html>1 dla odpowiedzi nr 4
Potrzebujesz użyć browser.js od babel-browser pakiet: https://babeljs.io/docs/usage/browser/
A najlepsze jest użycie kompilacji po stronie serwera.