Javascript 为什么我的巴别塔导入不起作用?
my-module.jsJavascript 为什么我的巴别塔导入不起作用?,javascript,webpack,babeljs,Javascript,Webpack,Babeljs,my-module.js function cube(x) { return x * x * x; } const foo = Math.PI + Math.SQRT2; export { cube, foo }; app.js import React from 'react'; import ReactDOM from 'react-dom'; import {cube} from './my-module'; 控制台日志(多维数据集(2)); 没有错误,但显示,import似乎不起
function cube(x) {
return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { cube, foo };
app.js
import React from 'react';
import ReactDOM from 'react-dom';
import {cube} from './my-module';
控制台日志(多维数据集(2));
没有错误,但显示,import
似乎不起作用<代码>stackoverflow,无需更多详细信息,代码已显示我的意思,请不要强制我们添加更多详细信息
"ReferenceError: cube is not defined
at eval (eval at 35 (http://localhost:8080/build/bundle.js:84:1), <anonymous>:1:1)
at Object.35 (http://localhost:8080/build/bundle.js:84:1)
at __webpack_require__ (http://localhost:8080/build/bundle.js:20:30)
at Object.34 (http://localhost:8080/build/bundle.js:71:18)
at __webpack_require__ (http://localhost:8080/build/bundle.js:20:30)
at http://localhost:8080/build/bundle.js:63:18
at http://localhost:8080/build/bundle.js:66:10"
B.法律改革委员会
{
"presets": [
"es2015",
"react",
"stage-0"
],
"plugins": [
"transform-react-jsx"
],
"retainLines": true,
"sourceMaps": "both",
"ignore": [
"*.css"
]
}
尝试从“/my module”导入{cube}
当您执行导入多维数据集时,您正在查找默认导出我试图用您提供的信息重现错误,但无法执行 具体来说,我创建了这个简单的项目,一切都按预期进行 package.json
{
"name": "dummy-react",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel": "^6.23.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"webpack": "^3.10.0"
}
}
.babelrc
{
"presets": [
"es2015",
"react",
"stage-0"
],
"plugins": [
"transform-react-jsx"
],
"retainLines": true,
"sourceMaps": "both",
"ignore": [
"*.css"
]
}
webpack.config.js
var webpack = require('webpack')
module.exports = {
entry: './app.js',
output: {
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
loaders: ['babel-loader'],
exclude: /(node_modules)/
}
]
}
}
function cube(x) {
return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { cube, foo };
import React from 'react'
import ReactDOM from 'react-dom'
import {cube} from './my-module'
console.log(cube(2))
ReactDOM.render(
<h1>Hello, World!</h1>,
document.getElementById('root')
);
my module.js
var webpack = require('webpack')
module.exports = {
entry: './app.js',
output: {
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
loaders: ['babel-loader'],
exclude: /(node_modules)/
}
]
}
}
function cube(x) {
return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { cube, foo };
import React from 'react'
import ReactDOM from 'react-dom'
import {cube} from './my-module'
console.log(cube(2))
ReactDOM.render(
<h1>Hello, World!</h1>,
document.getElementById('root')
);
app.js
var webpack = require('webpack')
module.exports = {
entry: './app.js',
output: {
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
loaders: ['babel-loader'],
exclude: /(node_modules)/
}
]
}
}
function cube(x) {
return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { cube, foo };
import React from 'react'
import ReactDOM from 'react-dom'
import {cube} from './my-module'
console.log(cube(2))
ReactDOM.render(
<h1>Hello, World!</h1>,
document.getElementById('root')
);
从“React”导入React
从“react dom”导入react dom
从“/my module”导入{cube}
控制台日志(多维数据集(2))
ReactDOM.render(
你好,世界!,
document.getElementById('root'))
);
index.html
<html>
<head>
</head>
<body>
<div id="root"></div>
<script src="./bundle.js"></script>
</body>
</html>
因此,问题可能不在您提供的代码中。
bablrc
notbablerc
还有它的import{cube}from./my module'
@azium,您好,import React from'React'
行也显示React
未定义`仍然不工作,行import React from'React'
也显示React
未定义。你是对的,Chrome浏览器说React
未定义,实际上已定义,似乎即使我在行import{cube}from./my module'中添加了一个断点代码>,我们无法使用chrome控制台查看反应是什么。