我尝试在模块中使用d3.js。我使用Babel 7来编译我的代码源。
这是我的string：
package.json请注意{
"name": "d3_learning",
"version": "1.0.0",
"description": "",
"main": "index.js",
"directories": {
"test": "test"
},
"scripts": {
"build": "babel src --out-dir dist --source-maps --minified --no-comments",
"build:watch": "npm run build -- -w"
},
"babel": {
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "entry",
"targets": {
"firefox": "64",
"opera": "57",
"chrome": "71",
"edge": "44",
"ie": "11"
}
}
]
]
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.2.3",
"@babel/core": "^7.2.2",
"@babel/node": "^7.2.2",
"@babel/polyfill": "^7.2.5",
"@babel/preset-env": "^7.2.3",
"@babel/register": "^7.0.0"
},
"dependencies": {
"d3": "^5.7.0"
}
}
部分中的内容，我指出Web浏览器的版本对我很感兴趣。浏览器对targets函数一无所知。只有Node.js知道。
这是我的源代码：
require但是我看到Babel 7代码生成结果包含import * as d3 from 'd3';
function draw(data) {
// ...
}
d3.json('../data/some-data.json', draw);
函数：
require
因此我在浏览器中出现运行时错误：
未捕获的ReferenceError：未定义require
为什么会发生，我该如何解决该问题？
答案 0 :(得分：0)
是的，require（）未内置在浏览器中。
Babel默认将导入和导出声明转换为CommonJS（require / module.exports）。
Babel什么也没做，基本上就像const babel = code => code一样；
通过解析代码，然后再次生成相同的代码。
如果您想在浏览器中运行现代JavaScript，单凭Babel还不够，那么您还需要一个支持CommonJS模块语句的构建系统或捆绑程序：
Babelify + Browserify
Babel + WebPack
这两个工具将转换您的require调用以在浏览器中工作。
希望它会有所帮助，并创建了一个简单的webpack，babel设置可以根据需要进行检查。 webpack-babel setup