我已经使用 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、fixed-data-table、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 文件中，内容来自于我的 react 类，我将以下内容添加到开头(我假设错误源于此)
import React from './bundle';
import ReactDOM from './bundle';
import {Table, Column, Cell} from './bundle';
import Chart from './bundle';
import vis from './bundle';
这导致我的浏览器开发工具出现错误:未捕获引用错误:未定义 React。
我在捆绑过程中哪里出错了？我假设捆绑一切顺利，因为没有错误。但是，我如何正确导入另一个 .js 文件中的 React 等？
这是我的 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"
}
}
最佳答案
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>
主要.js :
import React from 'react';
....
关于javascript - Webpack:使用 Bundle.js， "React is not defined"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41343656/