Webpack:使用Bundle.js，“未定义反应”
我用Webpack来捆绑我所有的npm模块。这是我的webpack.config.js：
"use strict";
module.exports = {
entry: './main.js',
output: { path: __dirname, filename: 'bundle.js' },
module: {
loaders: [
{
test: /.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{test: /\.json$/, loader: "json"},
]
},
};这是我所指的main.js。正如您所看到的，我尝试导入React、React dom、固定数据表、chartjs、jquery和visjs。
import React from 'react';
import ReactDOM from 'react-dom';
import {Table, Column, Cell} from 'fixed-data-table';
import Chart from 'chartjs';
import jquery from 'jquery';
import vis from 'vis';这一切都很好，我从我的index.html中删除了react、chartjs、jquery等src，并完全引用了新创建的bundle.js。
在派生内容的函数式.js文件中，我将以下内容添加到开头(假设错误起源于此)
import React from './bundle';
import ReactDOM from './bundle';
import {Table, Column, Cell} from './bundle';
import Chart from './bundle';
import vis from './bundle';这将在我的浏览器开发工具中给出错误:未定义的参考错误: React :React。
我在捆绑过程中做错了什么？我猜捆绑还不错，因为没有错误。但是我如何导入，例如，如何正确地在另一个.js文件中进行响应？
这是我的package.json：
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.3.17",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-runtime": "^6.3.19",
"chartjs": "^0.3.24",
"webpack": "^1.12.9"
},
"dependencies": {
"chartjs": "^0.3.24",
"fixed-data-table": "^0.6.0",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"vis": "^4.17.0"
}
}回答 2
Stack Overflow用户
发布于 2016-12-27 10:50:54
Webpack将从'./main.js'开始读import语句，以确定模块需要捆绑。
更新：
由于已经在bundle.js中的库，您的文件应该如下所示：
Index.html(不包括任何已经导入到您编写的.js文件中的库)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>main.js：
import React from 'react';
....Stack Overflow用户
发布于 2016-12-27 10:57:27
您不能从'bundle.js‘导入，因为它被编译成ES5，而ES5不支持模块(导入和导出)。
对另一个js进行导入的正确方法是通过导入。
import React from 'react'您可以在：https://www.sitepoint.com/understanding-es6-modules/上找到有关模块的更多信息
https://stackoverflow.com/questions/41343656
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号