私はこれを持っていますwebpack.config.js
:
module.exports = {
entry: './src/admin/client/index.jsx',
output: {
filename: './src/admin/client/static/js/app.js'
},
loaders: [
{
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules/,
query: {
optional: ['runtime']
}
}
],
resolve: {
extensions: ['', '.js', '.jsx']
}
};
...まだこのエラーが発生します:
$ webpack -v ハッシュ:2a9a40224beb025cb433 バージョン:webpack 1.10.5 時間:44ms [0] ./src/admin/ client/index.jsx 0 bytes [built] [failed] ./ src/admin/client/index.jsx Module parse error failed:/ project/src/admin/client/index.jsx 1行目:予期しない予約語 このファイルタイプを処理するには、適切なローダーが必要な場合があります。 | import React from 'react'; | import AdminInterface from './components/AdminInterface';
私が持っています:
webpack
をグローバルおよびローカルにインストールしましたbabel-loader
、babel-core
、およびbabel-runtime
babel-loader
念のため、グローバルになぜ地獄はbabel-loader
?または、babel-loader
モジュールでは動作しませんか?
更新:
babel
は入力ファイルをうまく処理しているように見えます。実行すると:
./node_modules/babel/bin/babel.js ./src/admin/client/index.jsx
... ES5が期待どおりに出力されます。したがって、どうやらwebpack
が正しくロードされないbabel-loader
。
これは、オペレーターエラーの場合のように見えます。僕の webpack.config.js
構造が正しくありませんでした。具体的には、ローダーの詳細をmodule
セクション内に配置する必要がありました。
module.exports = {
entry: './src/admin/client/index.jsx',
output: {
filename: './src/admin/client/static/js/app.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules/,
query: {
optional: ['runtime']
}
}
],
resolve: {
extensions: ['', '.js', '.jsx']
}
}
};
es2015とreactpresetsを含めて同じ問題を修正し、それらをwebpack.config.jsファイルに追加します。
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react
この投稿で説明されているとおり、 https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html
私の完全なwebpack.config.jsファイル:
module.exports = {
context: __dirname + "/src",
entry: './main',
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ['es2015', 'react']
}
}
],
resolve: {
extensions: ['.js', '.jsx']
}
}
};
Babelのバージョンは何ですか?babelのバージョンが最大6+の場合、このようにプリセット「es2015」と「react」を識別する必要があります
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel', // 'babel-loader' is also a legal name to reference
query: {
presets: ['react', 'es2015']
}
}
]
}
これらのモジュールをインストールすることを忘れないでください:
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev