如何使用Babel在React应用程序中转换每个依赖项

时间:2018-08-23 06:38:35

标签: javascript reactjs babeljs transpiler

我正在使用react开发一个应用程序,它需要在IE上运行。我正在使用一个名为query-string的外部库。它包含箭头功能,而IE不知道这些功能,并且由于某种原因,该库中的代码未转译或翻译为较旧的JS。

在该项目中,我使用库popmotion遇到了类似的问题,该库正在使用find方法,但是我通过安装Babel polyfill并将其包含在主文件App.jsx中来解决了该问题。我没有弹出react应用程序,因为我对此还很陌生,也不知道React在幕后如何工作。

这是我的package.json

{
    "name": "ruzovky",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "babel-polyfill": "^6.26.0",
        "classnames": "^2.2.6",
        "deepcopy": "^1.0.0",
        "node-sass-chokidar": "^1.3.3",
        "npm-run-all": "^4.1.3",
        "popmotion": "^8.3.4",
        "prop-types": "^15.6.2",
        "query-string": "^6.1.0",
        "react": "^16.4.2",
        "react-dom": "^16.4.2",
        "react-scripts": "1.1.4"
    },
    "scripts": {
        "build-css": "node-sass-chokidar src/ -o src/",
        "watch-css": "node-sass-chokidar src/ -o src/ --watch",
        "start-js": "react-scripts start",
        "start": "npm-run-all -p watch-css start-js",
        "build-js": "react-scripts build",
        "build": "npm-run-all build-css build-js",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject"
    }
}

为帮助您理解我的问题:其他所有内容都会被移植,因为react会处理所有事情(我可以​​使用JavaScript创建React组件,尚不支持浏览器),除了这个库。在我的node_modules文件夹中,也有babel-loader和webpack。

1 个答案:

答案 0 :(得分:0)

您应该使用构建工具,最简单,使用最广泛的工具是webpack

此处是有关如何通过webpack

将ES6转换为旧版本的教程