如何使用 Babel 转译 React 应用程序中的每个依赖项答案

【问题标题】：How to transpile every dependency in a React app using Babel如何使用 Babel 转译 React 应用程序中的每个依赖项
【发布时间】：2019-01-29 11:20:27
【问题描述】：

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

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

这是我的 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 创建反应组件，目前还没有浏览器支持）。在我的 node_modules 文件夹中也有 babel-loader 和 webpack。

【问题讨论】：

标签： javascript reactjs babeljs transpiler

【解决方案1】：

你应该使用构建工具，最简单和最普遍的一种是webpack。

这里是关于如何通过webpack将 ES6 转换为旧版本的教程

【讨论】：

默认情况下不使用它吗？我使用 create-react-app 创建了应用程序，并且在 node_modules 中有一个 webpack 文件夹
显示的网页也有一个指向单个 bundle.js 的链接。那个 webpack 正在开发中吗？感谢您的快速回复
你是如何开始你的应用程序的？
npm start 实际上是这个“npm-run-all -p watch-css start-js”，因为我使用的是 sass，这个设置取自官方 react github 页面
create-react-app v2 默认转译依赖项