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

Posted 2023-03-07

【中文标题】我可以在没有 webpack 的情况下使用 react 和 babel 吗？还是我需要所有 3 个组合？

【英文标题】：Can I use react and babel without webpack? Or do I need all 3 in combination?

【发布时间】：2019-06-24 08:59:32

【问题描述】：

所以我能够使用 webpack 和 babel 创建自己的响应环境，但是，当我尝试复制我对 react 和 webpack 所做的操作时，我在 reactjs 文件的传递代码中遇到语法错误。

例如，转译文件中的“require react”语句失败。任何想法为什么会发生这种情况？是不是只能用 Babel 不用 webpack 来创建 react 环境？

提前感谢您的任何回答！

编辑：下面是我只使用 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"
  

如果您还需要什么，请告诉我。抱歉回复晚了正在做晚饭。

【问题讨论】：

当然是这样，Babel 和 Webpack 是两个完全独立的库，做着完全不同的事情。显示您的设置，即 Babel 配置、目标节点版本等

虽然有可能，但它可能会让人难以理解示例。但这是可以完成的。但是你不能使用 JSX 语法和其他一些细节。

@GarrettMotzner 你不能在没有 Webpack 的情况下使用 JSX 语法吗？我高度对此表示怀疑。

哎呀，我的意思是通天塔。 :)

但是，我现在很困惑，@noobcoderiam。您要删除什么组件？ Webpack 还是 babel？因为你的描述和标题似乎不一致。

【参考方案1】：

当然可以。只需选择另一个捆绑器。

Parcel – 适用于 Web 和节点的零可配置捆绑器

Rollup – 主要用于 NodeJS 代码的打包器

Microbundle – 基于 Rollup 的微型模块捆绑器

Browserify – 浏览器中的require

【讨论】：

您是否真的尝试过使用另一个模块捆绑器来做到这一点？

@JaredSmith 是的，我做到了。如果我不尝试，我不会在这里写任何东西

不，我的意思是尝试将 React 与另一个捆绑器一起使用。它非常面向 webpack。

@JaredSmith 我几乎在所有项目中都使用 Parcel，因为它比 webpack 更容易设置

通过简要说明如何做到这一点，最好是代码示例，您的答案会大大改善。

【参考方案2】：

您可能可以，但它可能不如与 Webpack（或其他构建工具）捆绑那么理想，因为您将在客户端而不是服务器端进行转换，这可能会减慢速度很多。

如果您想在没有构建过程的情况下使用 Babel，您必须接受您将在客户端执行所有转译。构建过程（也称为捆绑过程）允许您在将代码发送到客户端（浏览器）之前呈现所有“服务器端”（在您的计算机或主机服务器上）。 Here's a helpful article on developing without a bundler. 如果没有转译，浏览器将无法运行您的代码，因为它仅在本机运行某种 javascript 风格（目前是 ES5 的基本形式，或者，为了安全起见，commonJS）。

@babel/standalone 的 Babel 文档指出，您可以在浏览器中运行 Babel，显然是通过在您用于将 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 配置。如果您问我，与仅使用捆绑器相比，这看起来很痛苦。

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

无论如何，根据documentation，如果您想以这种方式做事，这似乎应该可行。

【讨论】：

那你说的是没有webpack需要手动从url加载文件？

为什么转译客户端会成为安全问题？

啊，好点子。我想如果你在 JS 文件中导入 React，Babel 会很好。为了清楚起见，我会更新我的答案。

正确。但绝对不会建议这样做，因为每次用户加载页面时您都会进行构建。您的加载时间将受到极大影响

并且转译客户端不会是安全问题（据我所知），我更多的是指渲染 React 客户端，以防 OP 将 React 用于任何动态内容或服务器连接。