尝试在localhost:82/view
访问我的路线时,收到以下错误:
Debug: internal, implementation, error
Error: View file not found: `index.jsx`. Locations searched: [views\index.jsx]
at Object.exports.create (C:\Git\react_playground\node_modules\hapi\node_modules\boom\lib\index.js:21:17)
at Object.exports.internal (C:\Git\react_playground\node_modules\hapi\node_modules\boom\lib\index.js:254:92)
at Object.exports.badImplementation (C:\Git\react_playground\node_modules\hapi\node_modules\boom\lib\index.js:290:23)
at C:\Git\react_playground\node_modules\hapi\node_modules\vision\lib\manager.js:420:26
at done (C:\Git\react_playground\node_modules\hapi\node_modules\items\lib\index.js:30:25)
at C:\Git\react_playground\node_modules\hapi\node_modules\vision\lib\manager.js:415:20
at Object.oncomplete (fs.js:108:15)
我的文件树是这样的:
react_playground
|-src
| |-views
| | |-index.jsx
| |-module1.js
|-Gruntfile.js
|-...
你可以看到我试图在Grunt中设置一个实时加载工作流程(我之前从未做过的事情),但这与问题无关。我现在很关心为什么我的观点无法被发现,尽管它在views \ index.js中搜索。
module1.js:
var Hapi = require('hapi');
var engine = require('hapi-react')();
var server = new Hapi.Server();
server.connection({host: 'localhost',port: 82});
server.views({
defaultExtension: 'jsx',
path: 'views',
engines: {
jsx: engine, // support for .jsx files
js: engine // support for .js
}
});
server.route({
method: 'GET',
path: '/' ,
handler: function (request, reply) {
console.log('Got a request!');
reply('Welcome to my HAPI-React Page!');
}
});
server.route({
method: 'GET',
path: '/view',
handler: function(request, reply) {
reply.view('index', {
name: 'Test'
});
}
});
server.start();
index.js:
/** @jsx React.DOM **/
var React = require('react');
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
module.exports = HelloMessage;
Gruntfile.js:
module.exports = function(grunt) {
// Project configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jshint: {
files: ['Gruntfile.js', 'src/*.js', 'src/**/*.js']
},
concurrent: {
dev: {
tasks: ['nodemon', 'node-inspector', 'watch'],
options: {
logConcurrentOutput: true
}
}
},
nodemon: {
dev: {
script: './src/module1.js',
options: {
nodeArgs: ['--debug'],
env: {
PORT: '82'
},
// omit this property if you aren't serving HTML files and
// don't want to open a browser tab on start
callback: function (nodemon) {
nodemon.on('log', function (event) {
console.log(event.colour);
});
// opens browser on initial server start
nodemon.on('config:update', function () {
// Delay before server listens on port
setTimeout(function() {
require('open')('http://localhost:82');
}, 1000);
});
// refreshes browser when server reboots
nodemon.on('restart', function () {
// Delay before server listens on port
setTimeout(function() {
require('fs').writeFileSync('.rebooted', 'rebooted');
}, 1000);
});
}
}
}
},
watch: {
files: ['.rebooted'],
options: {
livereload: true
}
},
inject: {
single: {
scriptSrc: 'build/devscript.js',
files: {
// TODO: specify file to inject devScript into
}
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-nodemon');
grunt.loadNpmTasks('grunt-inject');
grunt.loadNpmTasks('grunt-open');
// Default task(s).
grunt.registerTask('default', ['nodemon', 'open', 'watch']);
};