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

Question

因此，我能够使用 webpack 和 babel 创建我自己的 react 环境，但是，当我尝试复制我只使用 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

你可能可以，尽管它可能不像与 Webpack(或其他构建工具)捆绑一样理想，因为你将在客户端而不是服务器端进行转译，这可能会减慢速度很多。

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

的 Babel 文档 @babel/standalone 声明您可以在浏览器中运行 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 配置。如果您问我，这与仅使用 bundler 相比看起来很痛苦。

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

反正根据documentation , 如果您想以这种方式做事，这似乎应该可行。