"npm run build" modül ayrıştırma hatası "Bu dosya türünü işlemek için uygun bir yükleyiciye ihtiyacınız olabilir."

Question

Lütfen bana çıplak bakın. Bu "npm, webpack ve babel" işinde yeniyim.

Am i

Bu öğretici izledi "npm çalıştırmak yapı" çalıştırdığınızda kod bloğunun altındaki hata alıyorum: iki kez http://jmfurlott.com/tutorial-setting-up-a-single-page-react-web-app-with-react-router-and-webpack/

# l 
total 36K 
drwxrwxr-x 5 dan dan 4.0K Apr 5 09:35 . 
drwxrwxr-x 10 dan dan 4.0K Apr 1 21:46 .. 
-rw-rw-r-- 1 dan dan 3.1K Apr 5 09:22 backup.js 
drwxrwxr-x 2 dan dan 4.0K Apr 5 09:17 css 
-rw-rw-r-- 1 dan dan 218 Apr 5 09:20 index.html 
drwxrwxr-x 3 dan dan 4.0K Apr 5 16:09 js 
drwxrwxr-x 10 dan dan 4.0K Apr 5 09:16 node_modules 
-rw-rw-r-- 1 dan dan 462 Apr 5 09:18 package.json 
-rw-rw-r-- 1 dan dan 552 Apr 5 09:18 webpack.config.js 
# tree js 
js 
├── app.js 
└── components 
    └── Login.js 

1 directory, 2 files 
# more package.json 
{ 
    "name": "lnkchk", 
    "version": "0.0.0", 
    "description": "lnchk", 
    "main": "index.js", 
    "scripts": { 
    "start": "webpack-dev-server --hot --progress --colors", 
    "build": "webpack --progress --colors" 
    }, 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-loader": "^6.2.4", 
    "react": "^0.14.8", 
    "react-hot-loader": "^1.3.0", 
    "react-router": "^2.0.1", 
    "webpack": "^1.12.14", 
    "webpack-dev-server": "^1.14.1" 
    } 
} 
# more webpack.config.js 
var webpack = require('webpack'); 
module.exports = { 
    entry: [ 
     'webpack/hot/only-dev-server', 
     "./js/app.js" 
    ], 
    output: { 
     path: __dirname + '/build', 
     filename: "bundle.js" 
    }, 
    module: { 
     loaders: [ 
      { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ }, 
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}, 
      { test: /\.css$/, loader: "style!css" } 
     ] 
    }, 
    plugins: [ 
     new webpack.NoErrorsPlugin() 
    ] 

}; 
# more js/app.js 
import React from 'react'; 
import Router from 'react-router'; 
import { DefaultRoute, Link, Route, RouteHandler } from 'react-router'; 

import LoginHandler from './components/Login.js'; 

/* 
let App = React.createClass({ 
    render() { 
    return (
     <div className="nav"> 
     <Link to="app">Home</Link> 
     <Link to="login">Login</Link> 

     <RouteHandler/> 
     </div> 
    ); 
    } 
}); 

let routes = ( 
    <Route name="app" path="/" handler={App}> 
    <Route name="login" path="/login" handler={LoginHandler}/> 
    </Route> 
); 

Router.run(routes, function (Handler) { 
    React.render(<Handler/>, document.body); 
}); 

*/ 
# more js/components/Login.js 
import React from 'react'; 

let Login = React.createClass({ 

    render() { 
    return(<div>Welcome to login</div>); 
    } 
}); 

export default Login; 
# npm run build 

> lnkchk@0.0.0 build /home/dan/dev/isvalidurl/ui 
> webpack --progress --colors 

Hash: d175b2c5e573c3d92579 
Version: webpack 1.12.14 
Time: 634ms 
    [0] multi main 40 bytes {0} [built] [1 error] 
    + 2 hidden modules 

ERROR in ./js/app.js 
Module parse failed: /home/dan/dev/isvalidurl/ui/node_modules/react-hot-loader/index.js!/home/dan/dev/isvalidurl/ui/node_modules/babel-loader/index.js!/home/dan/dev/isvalidurl/ui/node_modules/babel-loader/index.js!/home/dan/dev/isvalidurl/ui/js/app.js Line 3: Unexpected token 
You may need an appropriate loader to handle this file type. 
| /* REACT HOT LOADER */ if (module.hot) { (function() { var ReactHotAPI = require("/home/dan/dev/isvalidurl/ui/node_modules/react-hot-loader/node_modules/react-hot-api/modules/index.js"), RootInstanceProvider = require("/home/dan/dev/isvalidurl/ui/node_modules/react-hot-loader/RootInstanceProvider.js"), ReactMount = require("react/lib/ReactMount"), React = require("react"); module.makeHot = module.hot.data ? module.hot.data.makeHot : ReactHotAPI(function() { return RootInstanceProvider.getRootInstances(ReactMount); }, React); })(); } try { (function() { 
| 
| import React from 'react'; 
| import Router from 'react-router'; 
| import { DefaultRoute, Link, Route, RouteHandler } from 'react-router'; 
@ multi main 

Answer 1

Eğer .js dosyalar için yükleyici tanımlıyorsanız webpack yapılandırmanızda.

yerine

module.exports = { 
    entry: [ 
     'webpack/hot/only-dev-server', 
     "./js/app.js" 
    ], 
    output: { 
     path: __dirname + '/build', 
     filename: "bundle.js" 
    }, 
    module: { 
     loaders: [ 
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}, 
      { test: /\.css$/, loader: "style!css" } 
     ] 
    }, 
    plugins: [ 
     new webpack.NoErrorsPlugin() 
    ] 

}; 

deneyin. Babel vb. Hangi versiyonlarda kullandığınıza bağlı olarak, presets'a da bakmanız gerekebilir. Bu işlem işe yaramıyorsa veya webpack kurulumu için zaman harcamak istemiyorsanız ve sadece hızlı tepki veren bir ortam elde etmek istemiyorsanız, temel bir tepki/web paketi ortamı oluşturmak için http://www.overreact.io/ kullanmanızı ve buradan gitmenizi öneririz.