我可以在没有webpack的情况下使用react和babel吗？还是我需要全部3种组合？

Question

因此，我能够使用webpack和babel创建自己的反应环境，但是，当我尝试复制对react和webpack所做的操作时，在reactjs文件的代码中出现了语法错误。

例如，已编译文件中的“ require react”语句失败。任何想法为什么会发生这种情况？无法仅使用Babel而不使用webpack创建反应环境？

预先感谢您的任何回答！

编辑：以下是我仅使用Babel的设置

babel.config.js文件

module.exports = function (api) {
  api.cache(true);

  const presets = ["@babel/preset-env", "@babel/preset-react"];


  return {
    presets
  };
}

下面的reactTest.js文件

var React = require('react')
var ReactDOM = require('react-dom')



class App extends React.Component{
    render(){
        return(
            <div>test!</div>
            )
    }
}


ReactDOM.render(<App />, document.getElementById('app'))

下面的package.json

{
  "name": "webpack-babel-learning",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel src -d lib"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0"
  },
  "dependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0"
  }
}

需要帮助请叫我。很抱歉延迟答复正在做晚饭。

Answer 1

你可能可以，尽管它可能不像与 Webpack（或其他构建工具）捆绑那样理想地用于生产，因为你将在客户端而不是服务器端进行转译，这可能会大大减慢速度。

如果你想在没有构建过程的情况下使用 Babel，你必须接受你将在客户端完成所有的转译。构建过程（也称为捆绑过程）允许您在将代码发送到客户端（浏览器）之前渲染“服务器端”（在您的计算机或主机服务器上）的所有内容。这是一篇关于不使用捆绑器进行开发的有用文章。如果没有转译，浏览器就无法运行您的代码，因为它只原生运行某种 JavaScript 风格（目前是 ES5 的基本形式，或者安全地说是 commonJS）。

@babel/standalone的 Babel 文档指出，您可以在浏览器中运行 Babel，显然是通过包含type="text/babel"在<script>您用来将 React 组件导入到其附加的 HTML 的标签中。

// Load Babel.
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

// Load your React component with type set to "text/babel".
<script src="my_component.js" type="text/babel"></script>

来自@babel/standalone文档：Note that config files don't work in @babel/standalone, as no file system access is available. The presets and/or plugins to use must be specified in the options passed to Babel.transform.

^^这意味着您必须通过Babel.transform()如下方法运行代码：

var myCode = 'const getMessage = () => "Hello World";';
var output = Babel.transform(myCode, { presets: ['es2015'] }).code;

这似乎是说你需要将所有 JS 代码用引号括起来（使其成为一个巨大的字符串），然后将该字符串传递给方法Babel.transform()，该方法需要两个参数：1）你的代码，2）你的 babel 配置。如果你问我的话，与仅使用捆绑器相比，这看起来很痛苦。

这也意味着您不需要将 Babel 包含在您的 npm devDependency 中，因为它不会在您的节点环境中运行，而是在客户端中运行。那么，恭喜您删除了一些节点模块！

不管怎样，根据文档，如果你想这样做的话，这似乎应该可行。