Babel, Inc is a startup IT company based in Japan

Babel

All of us have used CRA(create-react-app) when we worked with React. Its an awesome tool. It gives us just to focus on React by letting take care of the configuration. Today we are going to learn how to setup Webpack and Babel for our React app. First lets learn about Webpack and Babel. ✔ Webpack: Its a module bundler which lets us bundle our project files into a single file.
 It requires a file in the root folder. Where we tell our webpack how to work with our application by giving entry point information and also output information. webpack.config.js path = ( ); .exports = { : , output: { : path.join(__dirname, ), filename: }
}; const require 'path' module entry './src/app.js' // relative path path 'public' // absolute path 'bundle.js' // file name Entry point is where does our application going to kick off and we set it by giving relative path value. And the output property tells webpack where to emit the outputs it creates and how to name those files. We have to give absolute path value in our output path properties. ✔ Babel: Its a JavaScript compiler. Babel on its own actually has no functionality. Yeah its a compiler but its not going to compile anything by default. We have to add various pulgins and presets to add support particular language features. You can check this out by visiting website. In babel website navigation bar section you will find . Click on it and you will get a new window. Babel Try It Out Where in left side window you can write your code and in right side window you will get your compiled code. Now lets write some JSX in left side window. template = ; const Hello < > p </ > p In right side window you will get JavaScript understandable compiled code which is always run behind the scene in our React app. In left side you see some options where some options are already been ticked. If you now untick presets option you will see an error cause this is responsible for converting our JSX syntax into JavaScript understandable code. PRESETS react react-preset In our tutorial we are going to use two presets: :- Which helps babel to convert ES6, ES7 and ES8 code to ES5. @babel/preset-env :- Which Transforms JSX to JavaScript. @babel/preset-react ✔ Getting Started: Now we know little bit about webpack and babel. Lets dive into our React setup. Create directories with these commands: mkdir react-setup-tutorial react-setup-tutorial
mkdir public src
touch public/index.html src/app.js cd In index.html file add following code inside it. React App <!DOCTYPE html> < > html < > head < = /> meta charset "UTF-8" < = = /> meta name "viewport" content "width=device-width, initial-scale=1.0" < = = /> meta http-equiv "X-UA-Compatible" content "ie=edge" < > title </ > title </ > head < > body < = > div id "root" </ > div < = > script src "./bundle.js" </ > script </ > body </ > html Initialize the project by running: npm init -y ✔ Install Webpack & React: npm install webpack webpack-cli -- - save dev We installed so that we can use webpack in the command line. webpack-cli We already know that webpack needs file in the root of the project directory. webpack.config.js So lets create webpack.config.js file with the following code inside it. path = ( ); .exports = { : , : { : path.join(__dirname, ), : }
}; const require 'path' module entry './src/app.js' output path 'public' filename 'bundle.js' Next add the webpack command inside package.json : : { : , : } "scripts" "start" "webpack --mode=development" "build" "webpack --mode=production" There are two modes in Webpack, and . Which we can set by flag. Production mode produces optimize files which are ready for use in production. development production --mode Install React: npm react react-dom install Now import react and react-dom inside our app.js file and also add some react code. React ; ReactDOM ; template = React.createElement( , {}, );

ReactDOM.render(template, .getElementById( )); import from 'react' import from 'react-dom' const 'p' 'Hello from react' document 'root' Now use below command in your terminal and open your index.html file in your browser. start npm Your app is working well. But you have question why didn't we use JSX. This time lets try with some JSX code in our app.js file. React ; ReactDOM ; template = ;

ReactDOM.render(template, .getElementById( )); import from 'react' import from 'react-dom' const Hello from react < > p </ > p document 'root' Now again run our previous command. start npm This time you will get an error. That's because we use JSX and JavaScript doesn't support JSX. So If we want to use JSX in our app we need to compiled it. And we can do it by babel. ✔ Install & Configure Babel: npm @ @ @ --save-dev install babel/core babel/preset-env babel/preset-react babel-loader We already know about @babel/preset-env and @babel/preset-react. Now what is @babel/core and babel-loader. : It allows us to run babel from tools like webpack. @babel/core : Its a webpack plugin. It allows us to teach webpack how to run babel when webpack sees certain files. babel-loader Lets configure babel by creating a .babelrc file inside the root of the project directory with following contents inside of it. { : [ , ]
} "presets" "@babel/preset-env" "@babel/preset-react" This file will tell babel which presets to use for transpiling the code. Now its time to teach webpack how to compile JSX into JavaScript code. To do that we need to use loader. A loader let us customize the behavior of webpack when it loads a certain files. Its going to run certain files through babel. For that we need to setup loader in file via the property on our objects. property needs an array of rules and a rule let us define how we want to use our loaders. Now we have one rule to take JSX and convert it into JavaScript with babel. webpack.config.js module module path = ( ); .exports = { : , : { : path.join(__dirname, ), : }, : { : [
      { : , : , : }
    ]
  }
}; const require 'path' module entry './src/app.js' output path 'public' filename 'bundle.js' module rules test /\.js$/ exclude /node_modules/ loader 'babel-loader' Here we set one rule of object where property tells which loader we want to use and we use . property for what files do we actually want to run this loader on and we want to run it on files that ends up with . property to exclude a set of files and we use cause we don't want to run babel through those libraries. Now we can use JSX in our React. Lets run our app again. loader babel-loader test .js exclude /node_modules/ start npm This time we don't get any error. Open your file in the browser and yeah its working. index.html ✔ Configure Source Map: Lets add some extra configuration settings in our file. webpack.config.js path = ( ); .exports = { : , : { : path.join(__dirname, ), : }, : { : [
      { : , : , : }
    ]
  }, : }; const require 'path' module entry './src/app.js' output path 'public' filename 'bundle.js' module rules test /\.js$/ exclude /node_modules/ loader 'babel-loader' devtool 'cheap-module-eval-source-map' Here we setup Source map by using property. It enhance our debugging process. Its use to display our original JavaScript while debugging, which is lot easier to look at than minified code. devtool ✔ Install Dev Server: Run this below command in the terminal. npm install webpack- -server -- - dev save dev Add following code inside webpack.config.js file. path = ( ); .exports = { : , : { : path.join(__dirname, ), : }, : { : [
      { : , : , : }
    ]
  }, : , devServer: { : path.join(__dirname, )
  }
}; const require 'path' module entry './src/app.js' output path 'public' filename 'bundle.js' module rules test /\.js$/ exclude /node_modules/ loader 'babel-loader' devtool 'cheap-module-eval-source-map' // changed line contentBase 'public' Next add webpack-dev-server command inside package.json: : { : , : , : } "scripts" "start" "webpack --mode=development" "build" "webpack --mode=production" "dev-server" "webpack-dev-server" Now run this command. npm run dev-server Its going to start development server. And It gives us output where we can access it. Now we have integrated both tools into one, the dev server is our server and its also running webpack for us. Now we can visit the highlighted url and we will get our app. ✔ Loading the Styles: Lets create a new file and folder in the directory. src Use following command to create file and folder. mkdir src/styles
touch src/styles/styles.css Now add following styles inside styles.css file. * { : blue;
} color To load our file we need to setup new rules in file. style.css webpack.config.js Before that we need to install some new loader. npm css-loader -loader install style --save-dev Allows webpack to load our CSS assets. css-loader: Take CSS and adds it to the DOM by injecting a <style> tag. style-loader: Now add new rules in our webpack.config.js file. path = ( ); .exports = { : , : { : path.join(__dirname, ), : }, : { : [
      { : , : , : }, { : , : [ , ]
      }
    ]
  }, : , : { : path.join(__dirname, )
  }
}; const require 'path' module entry './src/app.js' output path 'public' filename 'bundle.js' module rules test /\.js$/ exclude /node_modules/ loader 'babel-loader' // New rules to load css test /\.css$/ use 'style-loader' 'css-loader' devtool 'cheap-module-eval-source-map' devServer contentBase 'public' import inside our app.js file and run dev-server to see the effect. style.css React ; ReactDOM ; ; template = ;

ReactDOM.render(template, .getElementById( )); import from 'react' import from 'react-dom' import './styles/styles.css' const Hello from react < > p </ > p document 'root' If we want to use SCSS then we need to install that would help webpack to compile sass to css. The is dependent on another package . sass-loader sass-loader node-sass npm install sass-loader --save-dev node -sass path = ( ); .exports = { : , : { : path.join(__dirname, ), : }, : { : [
      { : , : , : }, { test: , : [ , , ]
      }
    ]
  }, : , : { : path.join(__dirname, )
  }
}; const require 'path' module entry './src/app.js' output path 'public' filename 'bundle.js' module rules test /\.js$/ exclude /node_modules/ loader 'babel-loader' // Rules to load scss // Some change here /\.scss$/ use 'style-loader' 'css-loader' 'sass-loader' devtool 'cheap-module-eval-source-map' devServer contentBase 'public' Now change our file extension to that is style.css .css .scss style.scss. Alos change the css import in app.js to: ; import './styles/styles.scss' And add following style to see that our wepback is working correctly for SASS. : blue;

* { : ;
} $brand-color color $brand-color Now run dev-server again by using following command. npm run dev-server And we configure our webpack for SASS. That's it. Now we have configure Webpack and Babel for React that we can use to create our React projects. Thanks for reading and stay tuned.🙂 Previously published at https://dev.to/iamismile/how-to-setup-webpack-and-babel-for-react-59ph

How to Setup Webpack and Babel 7 for React

In this tutorial, we will do some basic transforms to some source code, using Babel. Many people find the idea of transforming code scary, and unapproachable, but utilising the power of AST’s (abstract syntax trees), and a set of tools provided to us by Babel, most of the heavy lifting is done for us. : The examples in the article will include code specific to , , and , but familiarity with these libraries is not necessary for this tutorial. Note react redux react-redux AST Explorer There is a website called , that we can paste our code into and get an AST representation in many formats. This website will be useful for quickly viewing code in AST format, and will be useful when ascertaining which nodes we need to target. AST explorer Basic insertion Below, we have a file with a couple of imports, and a default export. reducers.js For our first transformation, lets add a new import and export to . We’ll add . To do this we need to: reducers.js mice Parse the code to AST format. Traverse the AST and find nodes adjacent to the nodes we want to add. Insert the new nodes. Generate the new code from our AST. Here’s how we achieve this: Let’s break this down. First of all, we call the parser on our code which transforms it from a string to an AST. const ast = parser(file, {sourceType: 'module'}); Note, since we are using ES6 modules, we need to let the parser know with . {sourceType: ‘module’} Next, we use to find our relevant nodes. How did we know we needed and ? This is where comes in handy. Below we’ve pasted our code in on the left panel, and on the right we can view the AST representation of our code. traverse ExportDefaultDeclaration ObjectExpression AST explorer We have 2 ’s, so will help us iterate over them and save the last one into a variable called . We then use to insert the new import after the last import. ImportDeclaration traverse lastImport insertAfter // this file is made up of snippets from transform.js let lastImport; traverse(ast, {ImportDeclaration(path) {lastImport = path;} const importCode = `import ${reducerName} from './${reducerName}'`;lastImport.insertAfter(parser(importCode, {sourceType: 'module'})); To add a property to the default exported object, we will use to iterate over ‘s. We only expect there to be one, so we will save its properties using . We can then push our new identifier into the array. traverse ObjectExpression properties = path.parent.declaration.properties mice properties // this file is made up of snippets from transform.js traverse(ast, {ObjectExpression(path) {properties = path.parent.declaration.properties}}) const id = t.identifier(REDUCER_NAME)properties.push(t.objectProperty(id, id, false, true)) You might be wondering what is? Good question. Since the alone does not have enough context, we cannot just call on a string of code like in the last example. Babel would parse it as an instead of a , leading to issues when re-generating the code. To solve this, we use the package to help the parser understand what we have added to the AST. t.objectProperty(id, id, false, true) mice parser Identifier Property @babel/types Now that we have updated our AST, we can call on it. This will transform the code from an AST back into code in string format. We run prettier on the string, and we end up with code like below: generate Wrapping a variable in a function Next up, we will learn how to use to wrap an identifier in a high order component. replaceWith Essentially, we want to go from: export default Sports; to: const mapStateToProps = ({ volleyball, soccer }) => ({volleyball,soccer}); export default connect(mapStateToProps)(Sports); This consists of two steps. Get the name of the default export (identifier). Replace it with a wrapped version of itself, and the function. mapStateToProps Here’s the file we will operate on: And this is the code to transform it: First thing to note, since we are parsing JSX this time, we need to let the parser know: const ast = parser(file, {sourceType: 'module', plugins: ['jsx']}); This time we use to iterate over the AST and find the . Once we’ve found it, we store the name of the variable being exported. traverse ExportDefaultDeclaration const declarationName = exportDefaultPath.node.declaration.name; Since we know the name of the exported variable, we can now replace the entire default export with new code: exportDefaultPath.replaceWith(// new code...) Having transformed the AST, we can run and on it, and write the file to disk. We end up with: generate prettier Summing up Learning how to manipulate AST’s will open up many new possibilities to you. With AST’s you could write: Linting plugins Babel plugins Codemods I hope this tutorial will set you on your way to exploring the world of AST’s!

Babel: Your first code transformations

In between graduate school and other things, I have been digging deeper into the ecosystem. As a person who loves React, I got curious with . With a simple on your command line, you will be able to install the most popular React starter pack. However, have you ever wondered how works? Or how they make these apps run fast on the browser with relatively smaller network requests? Maybe perhaps how bundling and generating static files happens after running ? These things are intriguing. Under the veil of magic these open source projects carry are simple lines of code that you and I can learn and understand. JavaScript create-react-app npm install -g create-react-app create-react-app npm run build I decided to build a React application from scratch with the help of and babel and deployed it to Netlify. You can check out my GitHub repo . I’ve also deployed the static site to Netlify . webpack here here For this project we’re going to make a simple React application that changes the background color of the webpage via button clicks. Start imagining in your head how that would look like. Would we need a class-based component or a functional component? What would onClick do? Would you need state? As you’re mulling over those things, it’s time to set up webpack and babel. Make sure you have Node installed on your machine and follow the commands below. This would include creating a new folder named — or whatever you want really — and run . Proceed to then install the libraries listed below. react-webpack-simple npm init mkdir react-webpack-simplecd react-webpack-simplenpm initnpm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loadermkdir srccd srctouch index.html index.jscd .. is used to convert ES2015+ code into a backwards compatible version of JavaScript. @ and on the other hand, are a set of plugins to support Babel and React features respectively — they do a lot of heavy lifting in the background for us. Lastly, transpiles our JavaScript code given all the presets we’ve laid out. Babel-core babel/preset-env @babel/preset-react, Babel-loader Go to the root of your directory, in our case, and create a file called . This is the file where we will define all the presets that Babel will use. As was mentioned above, that’s and . react-webpack-simple, .babelrc @babel/preset-env @babel/preset-react .babelrc Great! We’re inching our way towards finishing the hardest part of this project — trust me, React’s the easy part. Now create a new file called in the root folder. This is the configuration file of Webpack. Remember, at the heart of it, Webpack is just a module bundler. Different projects have different goals in mind, which necessitate different types of ways to serve files in production. Do we wants the css file to be in one style tag in our main html file? Do we want to enable caching? This is where all the magic happens. webpack.config.js But first, webpack has some core concepts that you need to familiarize yourself with — you can read about them in the . Entry, as the name implies, is the entry point for webpack to begin building its internal dependency graph. Anything not imported, in our case, in will not be a part of that graph. Make sure your JavaScript files and others are imported properly. The output, on the other hand, is where webpack will dump all of the bundles it creates. Since webpack can only understand JavaScript or JSON, there has to be functions or “middlewares” out there to help webpack understand things like static images, css files, and others. These “middlewares” are defined in loaders, webpack will use these “middlewares” to understand these non-JavaScript and JSON files in order for it to properly put these files in the internal dependency graph. Lastly, plugins help out loaders by helping out in the bundling process, asset management, and others. docs ./src/index.js // Install these dependencies before writing webpack.config.js npm install --save-dev html-webpack-plugin mini-css-extract-plugin react react-dom The file below is the application of theory from above. VENDOR_LIBS contains all the libraries we need in our react application. We’re creating this array because we don’t want to load all of our libraries right off the bat — that would eat up network requests. Instead, it would be better if we load these libraries on-demand. webpack.config.js The format that you see is for caching purposes. To increase user experience, we wouldn’t want our users to keep on downloading the dependencies used in our applications every time they load up our site. If said dependencies were somehow cached, then loading up a website would be faster per visit as our user would have already downloaded those dependencies in the past. If we make updates, then the user would only have to download the new versions, and not everything all over again. [name].[chunkhash].bundle.js webpack.config.js In the modules section, is used to transpile the JavaScript code. Remember what I said about non-JavaScript code? HTML and CSS files are non-JavaScript, so and are used to help with those. The test just means that if a file ends in [insert extension here], webpack will use [insert loader here]. For example, if a file ends in , webpack will use babel-loader html-loader css-loader html html-loader. In the plugins section, is used for importing JavaScript files from the HTML document — it’d be cumbersome to manually update the names of the script tags (with those hashed values mind you) every time you build the project. Meanwhile, the is used to generate separate CSS files per JavaScript file that imports one. Lastly, is used to prepare our project for production — React behaves differently in production vs. development. HtmlWebpackPlugin MiniCssExtractPlugin webpack.DefinePlugin Still with me? The last webpack configuration we have to do is to download and using npm. is a library that will enable us to delete our previous build files and replace them with new ones. This way, we don’t clutter our workspace with both old build files and new build files — it becomes confusing that way. is used for development purposes as every code change will automatically refresh the browser, making development easier, as opposed to building your project every time and opening every so often. Also modify the of your package.json into the following below. will create the build files while will start the development server. rimraf webpack-dev-server rimraf webpack-dev-server index.html scripts npm run build npm run start // Don't forget to run npm install --save-dev rimraf webpack-dev-server first"scripts": {"clean": "rimraf dist","start": "webpack-dev-server --open --mode development","build": "NODE_ENV=production npm run clean && webpack -p"} After all of that tinkering, your folder structure should look something like this. Note that the folder contains our build files. This folder is automatically generated when we enter the command. dist npm run build Your folder structure It’s pretty straightforward from here on out. contains the following code: index.html If you’ve ever used before, the tag with a id should look familiar. Note that this post isn’t about learning React, as I assume you already know how to use said framework. Below is the React code we will be using. It uses Bootstrap 3 and renders four buttons on the DOM, with each button corresponding to a different background color change. create-react-app div root That was a long process but it was worth the effort! Go to the terminal, enter drag and drop your file in the folder to your preferred web browser, and you should be good! I deployed my project in Netlify, as was stated above in this blog post, which allowed me to just drag and drop my static files in the dist folder, wait a couple seconds, and see it get deployed. npm run build, index.html dist Going forward, I’ll be building more applications from scratch like this to study all the things that are happening under the hood. What we built here is a static website that uses no back end server. The next project I’ll be building will include a Node back end and perhaps sockets to make it real time. The process of iterating means adding more features, but also means researching more to understand what the hell I’m doing. Learning never stops.

Webpack, Babel, and React from Scratch — BUT WHY?

I lied, I will not be -ing (explain like I’m 5) babel today. Instead, I will try and babel. I only wish that someone would have had this conversation with me when I first heard of babel. It’s never too late I suppose :). Let’s begin. ELI5 ELIN (explain like I’m new) : This article is based on the current version of babel (v6 as of writing). There are some drastic change with v7 and the article will be updated to reflect the same in the near future. Note : AFAIK, create-react-app uses babel. Seems like an interesting tool if I want to continue using all bleeding edge JS features. What’s the npm package I need to kick things off? Past Me : Not so fast mister! First, let us talk about what Babel is. As per the : Current Me documentation Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments Cool, so anything I write (TypeScript or ES6+) can be converted into ES5 which the browsers can understand. That’s awesome, anything else I need to know before I start off? Past Me: Yes, a couple of things. Babel, a.k.a. @babel/core, in itself is just a shell, it takes your code in and spits it out as is. What you do need are plugins which basically do the processing and transformations on your code. Current Me: Oh, okay. How do I get the plugins? Surely someone has created a library of these plugins, right? PM: That’s right, there are a lot of plugins that are available on the npm registry that you can install and use based on your project. Plugins range from simple transformations such as to more complex and sophisticated plugins such as . CM: transformation of arrow functions transformation of module systems You need to identify the plugins that you are going to need and import them as a devDependency to your project. So importing as a devDependency is going to be enough for getting my application to work as expected? PM: Yes. Almost. You need to further tell babel that you want it to pick certain plugins and apply them to your code. The simplest and also the recommended way of doing it is using the .babelrc file, which you can create at the root of your project, and add the plugins array in it. CM: { 
    "plugins": ["@babel/plugin-transform-arrow-functions"] 
} Alternatively, you can create and add your custom plugin and optionally pass additional parameters to it. { 
    "plugins": [
        ["name", {
           "option1": "value1",
           "option2": "value2"
        }]
    ] 
} Also, don’t forget, you need to include babel itself into your project. If you use webpack, you can use babel-loader which can be applied . via a rule That does not sound sound very easy though. Will I have to add each and every one of these plugins based on what ES6+ or TypeScript feature I want to use? PM: Absolutely not! That’s why there are presets. A developer should not have to put this list of plugins together for each project. Just use the most logical preset for your project and add additional plugins or presets as necessary. Currently, only a handful of presets are supported officially. Although there are , it is unlikely that you will need them in majority of the cases. CM: lot of plugins available What are the official presets? Do they support React? PM: They most certainly do, there are four main plugins: CM: : Makes your code compatible with the latest version of JavaScript (ES2017 as of now). It adds as needed. It can accept a to support any and all of your wishes. @babel/preset-env polyfills plethora of options : If you are using in your project for static type checking, you can use the preset-flow preset which comes with useful for stripping out the type checks that we add in our code. @babel/preset-flow flow @babel/plugin-transform-flow-strip-types : Provides you all the , most important one transforms JSX to JS. @babel/preset-react react specific plugins : Transforms your TS code to JS using all the @babel/preset-typescript plugins necessary. Babel also provides support for experimental features of JS which are provided in what is called stages of . There are total of 5 stages, last one being the standardization of the feature. If you want, there are presets available in npm under the name @babel/preset-stage-STAGE_NUMBER which can be included in your project as you see fit. Use them wisely. standardization by TC39 Cool! One last question- in my create-react-app based app, I see the babel preset used is react-app how is that different from the @babel/preset-react? PM: Great question! If you look at the that the create-react-app based projects use. You can see that they are using a lot more than the relatively simpler @babel/preset-react preset. They combine what they believe to be useful for anyone building applications using the create-react-app CLI. If you are not using the CLI then you are free to use whatever plugins and presets that you deem fit. CM: description of all the plugins and packages Awesome! I guess I am ready to start using babel then. Thanks! you can go back to the future now. PM: Sure thing :D. Do not forget to go through the n, and of babel. CM: documentatio faqs understand the caveats For advanced understanding of the internal workings of babel, refer to . the architectural handbook If you enjoyed this blog be sure to give it a few claps, read more or follow me on LinkedIn .

ELI5: Babel and the gang

So you want to use the new babel 7 with node? Our goal here will be to set up a minimal node application that is able to run locally and has a build command for remote deployment. Lets get started! There are a couple of differences with the babel you might be familiar with and v7. just like many other large organisations Babel has renamed it’s NPM packages. This means for example has been renamed to . Babels packages are now scoped babel-cli @babel/cli You can just use now and optionally define your requirements in the config file. No messing around with presets anymore. @babel/preset-env from the CLI to it’s own package: **babel-node** has been moved @babel/node Ok so we have the most important things down. You can optionally read more about the changes but here is what we need to do next: on babels website Setting up the application structure We’ll keep it as simple as possible: First you want to run to create a file inside the directory and depending on if you are using Git you might want to run npm init package.json git init We’ll set up two directories, one to develop in and one to deploy our compiled assets. your-project-directory|--dist|--src|--package.json For this example we’ll add just a simple file inside the src directory called server.js your-project-directory|--dist|--src|  |--server.js|--package.json We’ll need to add some babel packages to our project with . These respectively take care of babels general working, the usage of babel in the command line, the ability to use the newest JS features and the usage of babel with node. npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node For easy development we’ll also add the package using which reloads node for us automatically when one of our files is changed. nodemon npm install --save-dev Finally we just need to tell babel to use the package by creating a file in our project root: @babel/preset-env .babelrc // .babelrc{"presets": ["@babel/preset-env"]} Your project structure should now look like this: your-project-directory|--dist|--node_modules|--src|  |--server.js|--package.json|--.babelrc Adding scripts to package.json Now for the final step we’ll add our commands to the file. package.json Add as the script. This tells the nodemon package to watch for file changes, reload when it detects them and use babel-node to run the file . We’ll use this while developing locally. nodemon --exec babel-node src/server.js start src/server.js Add as the script. This tells babel to compile the files from the directory and place them in the directory. babel src --out-dir dist build src dist Add as the script. This enables us to run our compiled code on a server, the reason we are not just using for this is it uses quite a bit more memory than just using and adds some startup time to the process which is fine for some applications but can be a huge performance hit in others. node dist/server.js serve nodemon node Your should now probably look something like this: package.json {"name": "my-app","version": "1.0.0","description": "","main": "src/server.js","scripts": {"start": "nodemon --exec babel-node src/server.js","build": "babel src --out-dir dist","serve": "node dist/server.js"},"author": "","license": "ISC","dependencies": {},"devDependencies": {" ": "^7.0.0-rc.1"," ": "^7.0.0-rc.1"," ": "^7.0.0-rc.1"," ": "^7.0.0-rc.1","nodemon": "^1.18.3"}} @babel/cli @babel/core @babel/node @babel/preset-env Happy developing and good luck! If you have any questions or suggestions I’ll see you in the comments or alternatively you can hit me up . via twitter

Using babel 7 with node

I really want to use ES6 in my web project. Why? Because I want my career to stay current and well ES6 is the bees knees! Like what? Well there is the keyword for starters. Let Big Chiwawa Ok what about now that is cool. destructuring (Post Google Search) Ok I’ll give you that is cool. Also The list goes on and on … Default Args, Shorthand Properties, Computed Properties, Spread Operator, String Templates, Block Scoping. And import modules? Err not quite. You’ll still need Babel for that! (Annoyed at the thought of researching how to set this up) (Seeing furrowed brow) Don’t panic all the info you need is here. Yay Remove IntelliJ Red Marks I hate red marks. But I love linting. This is highlighted as red because the current version of Javascript for the project is not set to ES6. Head to Preferences -> Languages and Frameworks -> Javascript And select ES6! Yay Red is gone! So is that all I need to do? One would think but as you know JS is in a state of flux and not all features are available in all environments. I knew this wouldn’t be easy. What works where? Take a look at this . It gives a great overview of ES6 support across, browsers, polyfills, servers and mobile. compatibility table Oh great can you just give me the tl;dr; Well many commands are available natively but professional Software Engineers like good build tools and organised code. So in order to use Module Loading via ES6 import statements most developers use a transpile — Let’s try . Babel The import math module example Let’s assume we have a Math module which performs the addition task guess what this sums two numbers. sumTwo(number1, number2) ok that’s nice But as part of a larger program this is located in the file lib/addition.js It would be nice to see the whole file contents. sumTwo(number1, number2){ a + b;} function return { sumTwo } export Then we want to use this function in a file called main.js 'use strict'; { sumTwo } 'lib/addition'; import from console.log("2 + 3 = ",sumTwo(2,3) // 5); If you run this in Node you will see this: Genes-MacBook-Pro-2:javascriptzzzzzzzz thinkjones$ node -vv7.0.0Genes-MacBook-Pro-2:javascriptzzzzzzzz thinkjones$ node articles/using_es6/main.js/Users/thinkjones/dev/javascriptzzzzzzzz/articles/using_es6/main.js:3import { sumTwo } from 'lib/addition';^^^^^^SyntaxError: Unexpected token importat Object.exports.runInThisContext (vm.js:76:16)at Module._compile (module.js:545:28)at Object.Module._extensions..js (module.js:582:10)at Module.load (module.js:490:32)at tryModuleLoad (module.js:449:12)at Function.Module._load (module.js:441:3)at Module.runMain (module.js:607:10)at run (bootstrap_node.js:382:7)at startup (bootstrap_node.js:137:9)at bootstrap_node.js:497:3Genes-MacBook-Pro-2:javascriptzzzzzzzz thinkjones$ As far as I am aware is not supported and is still under heavy discussion. That’s why there are so many polyfill and transpiler libraries. To help with this intermediate phase the JS ecosystem. import So great how can I get this to work. Let’s try seems to be popular. From front page docs “Start by installing the Babel CLI and a preset”: Babel npm install --save-dev babel-cli babel-preset-env Then “Create a .babelrc file in your project (or use your package.json)” {  "presets": ["env"]} WTF is that? Well it’s a mechanism to take into account the target environment you are aiming for. Since Different products and versions of products support different ES6 systems natively you can optimise this by specifying your target environment. Sounds complicated should I give a f***? Not sure. I think for this example we will go with the default and investigate if we find issues. Do you work for a startup? Yes I love how scrappy you are. K lets try running it again Ahhh! SyntaxError: Unexpected token import” node main.js See… So Babel doesn’t actually do anything you need to compile or rather transpile the code into an ES5 format that the target environment understands. Yeah yeah — so how do I do that? Well I am glad you asked. Babel has an awesome setup page where you select your build tools and get the necessary info — Babel Setup Page Link Let’s use the Babel CLI Install CLI Locally npm install --save-dev babel-cli Then trans-pile: ./node_modules/.bin/babel  ./src --experimental --source-maps-inline -d ./dist Way what’s this src directory? Yeah when I started the article I had all my files in root, but then after playing with Babel and realised it was going to produce a bunch of output files I decided to use a different directory. src and dest Sounds good — So what do we have now? Here you go — two directories one with the src and another with the dist files. Yeah all well an good but does the program now run? Yeah it should. Yeah are you sure? No let’s try it in Node. node dist/main.jsmodule.js:474throw err;^ Error: Cannot find module 'lib/addition' DAMMMIT! Investigating Relative Files References So this is down to my limited Node knowledge but it depends on how relative file references are specified. My file was located at and I was running node from . So I think the import is relative to the node running directory when specified like this: main.js /src/main.js / { sumTwo } 'lib/addition'; import from So when it was running it wasn’t working, because it was expecting the file in and not /lib/addition.js /dist/lib/addition.js. To fix this I had to change the original import statement to be relative to the current directory. So changing it to: { sumTwo } './lib/addition'; import from Then re-running Babel compile by: ./node_modules/.bin/babel  ./src --experimental --source-maps-inline -d ./dist Gives me the correct transpiled code: 'use strict'; _addition = require('./lib/addition'); var console.log("2 + 3 = ", (0, _addition.sumTwo)(2, 3) // 5); Which then runs when I call this command from the root directory: node ./dist/main2 + 3 =  5 YAY! All well and good where is the code? Here at my github — thinkjones

Quickstart guide to using ES6 with Babel, Node and IntelliJ

Hello My organisation had a directory structure for projects like: grunt/Gruntfile.js grunt/package.json grunt/node_modules/ web/index.html (well, .php) web/js/script.js Which had been fine with our for SCSS, JS etc. grunt toolchain When I added JSX and via I found I encountered an react browserify “Error running grunt-browserify” >> Error: Cannot find module ‘react’ from ‘/directory/of/source/jsx’ There may be a simple way of telling (or similar, I had the same errors when investigating alternatives) the location of the node_modules/ for modules, presets and plugins, but until I find out what it is, I have reorganised to: grunt-browserify /Gruntfile.js /package.json /node_modules web/index.html web/js/react-app.js And changed my to reflect that the web/* source files folder live in a child directory (web/) rather than a sibling (../web/). Gruntfile.js >> Bundle web/js/react-app.js created. I would prefer to have not moved my directories around, but for now, my OCD can live with a bit of pollution of the parent directory.

Reorganising a directory structure to solve “Cannot find module/preset/plugin” in grunt with babel…

pixabay.com Nowadays coding is like eating fast food: make fast, eat fast, as long as the job was done before deadline. You will make many mistakes, You will come back for more. During the development cycle, half of time is spent on new frameworks and breaking down features, another half of the time is implementing, the goal of the story is shorten time of environment configuration, and hit the ground to coding. Recently, I am playing around ES7 async/await in Node.js, which needs an ES7 environment. There are couple of methods base on the great SDK babeljs.io to accomplish the environment, and I pick up one as the boilerplate and for share. Remark: This story is for Node v4. and the lastest Node supports native ES7, thanks Stefan Bobev Step 1 — clone the template from github , and install. $ git clone git@github.com:wahengchang/node-es7-babel-template.git$ npm install Step 2 — Basically the environment was setup, let’s try something in ES7 to see if it works well. Go and Edit “main.js” file, which is a default entry of ES7 compiler, there is a sleep() function which is a Promise function, and it will be called by the amazing ES7 after. //    ./ //    ./ //    ./ //    ./ //    ./ .gitignore README.md es7compiler.js main.js package.json //main.jsmodule.exports = function() { (async function() {  
    var sleep = function(para) {  
        return new Promise(function(resolve, reject) {  
            setTimeout(function() {  
                console.log('para: ', para)  
                resolve(para \* para)  
            }, 1000)  
        })  
    }

    var result = await sleep(2);  
    console.log('result: ', result);  
}()); } Step 3 — Run the script which edited on Step 2, done. $ npm start//para:  2//result:  4 Reference: github: https://github.com/wahengchang/node-es7-babel-template babel must read: http://babeljs.io/learn-es2015/

BABEL

babel.jp

-- employees

Since n.d.

COMPANY RANKING

BABEL

EVERGREEN INDEX #2400

Representing this company? Click here to claim and customize this page!

Babel WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!

BABEL

babel.jp

-- employees

Since n.d.

COMPANY RANKING

BABEL

EVERGREEN INDEX #2400

RELATED COMPANIESRANK

STORIES ABOUT BABEL

Representing this company? Click here to claim and customize this page!

Babel WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!