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

Question

所以我能够使用 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"
  }
}

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

Answer 1

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

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

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

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

Browserify – 浏览器中的require

Answer 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，如果您想以这种方式做事，这似乎应该可行。