Can I use react and babel without webpack? Or do I need all 3 in combination?

Question

So I was able to create my own environment for react using webpack and babel, however, when I try to replicate what I did with just react and webpack I get syntax errors in the transpired code for the reactjs file.

For example the "require react" statement in the transpiled file fails. Any ideas why this might occur? Is it not possible to create a react environment with only Babel and not webpack?

Thanks in advance for any answers!

EDIT: Below is my setup with just Babel

babel.config.js file

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

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


  return {
    presets
  };
}

reactTest.js file below

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 below

{
  "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"
  }
}

Let me know if you need anything else. Sorry for late reply was making dinner.

Answer 1

You probably can, though it might not be as ideal for production as bundling with Webpack (or some other build tool) because you'll be doing the transpilation client-side rather than server-side, which could slow things down a lot.

If you want to use Babel without a build process, you have to accept that you'll be doing all of your transpilation client-side. The build process (also known as bundle process) is what allows you to render everything "server side" (on your computer or host server) before sending your code to the client (the browser). Here's a helpful article on developing without a bundler. Without transpilation, the browser can't run your code because it only runs a certain flavor of JavaScript natively (currently a basic form of ES5 or, to be safe, commonJS).

The Babel documentation for @babel/standalone states that you can run Babel in the browser, apparently by including type="text/babel" in the <script> tag you're using to import your React component to the HTML it's appending.

// 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>

From the @babel/standalone docs: 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. 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.

^^What this means is that you'll have to run your code through the Babel.transform() method like so:

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

This appears to be saying that you need to wrap all of your JS code in quotes (to make it a giant string) and then pass that string to the Babel.transform() method, which takes two parameters: 1) your code, and 2) your babel configuration. This looks like a pain compared to just using a bundler, if you ask me.

This also means that you don't need to include Babel in your npm devDependencies, since it won't be running in your node environment but rather in the client. So, congratulations on removing some node modules!

Anyway, according to the documentation , it seems like this should work if you want to do things this way.

Answer 2

Of course you can. Just choose another bundler.

Parcel – zero configurable bundler for both web & node

Rollup – bundler for NodeJS code mostly

Microbundle – bundler for tiny modules based on Rollup

Browserify – require in a browser