Próbuję użyć WebPacka z Babel do skompilowania zasobów ES6, ale otrzymuję następujący komunikat o błędzie:
You may need an appropriate loader to handle this file type.
| import React from 'react';
| /*
| import { render } from 'react-dom'
Oto jak wygląda moja konfiguracja Webpack:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './index',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/dist/'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
}
}
Oto krok oprogramowania pośredniego, który wykorzystuje Webpack:
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var config = require('./webpack.config');
var express = require('express');
var app = express();
var port = 3000;
var compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {
noInfo: true,
publicPath: config.output.publicPath
}));
app.get('/', function(req, res) {
res.sendFile(__dirname + '/index.html');
});
app.listen(port, function(err) {
console.log('Server started on http://localhost:%s', port);
});
Wszystko, co robi mój plik index.js, to importowanie, ale wygląda na to, że „program ładujący babel” nie działa.
Używam 'babel-loader' 6.0.0.
Odpowiedzi:
Musisz zainstalować
es2015
ustawienie wstępne:a następnie skonfiguruj
babel-loader
:źródło
Upewnij się, że masz zainstalowane ustawienie wstępne babel es2015 .
Przykładowy pakiet package.json devDependencies jest:
Teraz skonfiguruj program ładujący babel w konfiguracji swojego pakietu internetowego:
dodaj plik .babelrc do katalogu głównego projektu, w którym znajdują się moduły węzłów:
Więcej informacji:
babeljs.io - używanie babel z pakietem internetowym
babeljs.io - dokumentacja na .babelrc
React-webpack-cookbook - konfiguruj reaguj za pomocą webpacka
źródło
Jeśli używasz Webpack> 3, musisz tylko zainstalować
babel-preset-env
, ponieważ to ustawienie wstępne obejmuje es2015, es2016 i es2017.To pobiera konfigurację z mojego
.babelrc
pliku:źródło
Ze względu na aktualizacje i zmiany w godzinach nadliczbowych, zgodność wersji zaczyna powodować problemy z konfiguracją.
Twój plik webpack.config.js powinien wyglądać tak, jak ten, możesz również skonfigurować sposób dopasowania.
Kolejną rzeczą do zauważenia jest zmiana argumentów, powinieneś przeczytać dokumentację Babel https://babeljs.io/docs/en/presets
Uwaga: musisz się upewnić, że masz zainstalowane powyższe zależności @ babel / preset-env & @ babel / preset-aware w swoim pakiecie.
źródło
@babel/preset-react
naprawiło to dla mnie.AKTUALIZACJA ZESPOŁU BABEL:
Jesteśmy bardzo podekscytowani, że próbujesz użyć składni ES2015, ale zamiast kontynuować coroczne ustawienia wstępne, zespół zaleca użycie babel-preset-env. Domyślnie zachowuje się tak samo, jak poprzednie ustawienia wstępne kompilacji ES2015 + do ES5
Jeśli używasz Babel w wersji 7 , będziesz musiał uruchomić npm install @ babel / preset-env i mieć w swojej
.babelrc
konfiguracji "presets": ["@ babel / preset-env"] .Spowoduje to kompilację wszystkich najnowszych funkcji do wersji es5 kodu es5:
Wymagania wstępne :
Krok 1: npm install --save-dev @ babel / preset-env
Krok 2: W celu skompilowania
JSX
kodu do es5, babel dostarcza@babel/preset-react
pakiet do konwersji,jsx
pliku rozszerzenia na zrozumiały kod natywnej przeglądarki.Krok 3: npm install --save-dev @ babel / preset-act
Krok 4: Utwórz
.babelrc
plik w ścieżce głównej projektu, jeśliwebpack.config.js
istnieje.Krok 5: webpack.config.js
źródło
Podczas korzystania z Typescript:
W moim przypadku użyłem nowszej składni pakietu webpack v3.11 z ich strony z dokumentacją, po prostu skopiowałem konfigurację CSS i stylów ładujących z ich strony internetowej. Przekomentowany kod (nowsze API) powoduje ten błąd, patrz poniżej.
Właściwy sposób to ująć to:
w tablicy właściwości loaders.
źródło
Ten rzuca mi na przejażdżkę. Angular 7, Webpack Znalazłem ten artykuł, więc chcę go przypisać https://www.edc4it.com/blog/web/helloworld-angular2.html
Jakie jest rozwiązanie: // w pliku komponentu. użyj szablonu jako pakietu internetowego, potraktuje go jako szablon tekstowy: require ('./ process.component.html')
aby karma to zinterpretowała npm install dodaj html-loader --save-dev {test: /.html$/, użyj: "html-loader"},
Mam nadzieję, że to komuś pomoże
źródło