"npm运行构建“;模块解析错误”;您可能需要一个适当的加载程序来处理此文件类型&”;

"npm run build" module parse error "You may need an appropriate loader to handle this file type."

本文关键字:一个 加载 文件 类型 处理 程序 模块 构建 运行 quot npm      更新时间:2024-01-08

当我运行"npm-run-build"时,我在代码块的底部得到了错误

我遵循了这个教程

# 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

您在webpack配置中为.js文件定义了两次加载程序。

尝试

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()
    ]
};

相反。根据您使用的babel等的版本,您可能还需要查看预设。如果这不起作用,或者你不想花时间设置webpack,只想快速获得一个运行的react环境,我建议使用http://www.overreact.io/设置一个基本的react/webpack环境并从那里开始。