与Webpack的ReactJS:未捕获的ReferenceError:需求未定义
以下是我的webpack.config.js。 在浏览器开发工具中,获取“Uncaught ReferenceError:require is not defined”
如果我删除“目标”:“节点”,然后错误“未捕获TypeError:fs.readFileSync是不是一个函数”被抛出。
var config = { entry: './main.js', output: { filename: './index.js', }, devServer: { inline: true, port: 8080 }, node: { fs: "empty" }, module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } } ] }, target: 'node' } module.exports = config;
您需要一个来自节点的本机模块,并尝试在浏览器中使用它。 在这种情况下,你需要fs
。
如果你正在为浏览器做代码,那么你无法使用节点fs.readFileSync
,你不应该使用target: 'node'
我可以使用以下main.js
文件重新创build您的问题。
const fs = require('fs'); const test = function () { console.log('this is a test'); var contents = fs.readFileSync('DATA', 'utf8'); } test();
如果您正尝试在浏览器中使用其他文件,则可以:
需要构build文件
这将使用require
将index.js文件的数据永久地发送到例如。 这是完全可以接受的,如果内容是一些configuration,不会改变每个用户,例如语言文件等。这种方法可以增加您的资产文件,并命中加载速度,如果文件的内容很大。
const data = require('some-data.json`) console.log(data) // would output the JSON
AJAX的内容
使用Ajax /获取您可以调用页面加载文件的内容。 如果这个文件是为每个访问者独特的,那么你将需要这样做。