JavaScript React webpack Babel Yarn
This is a novice article, mainly to record the use process, hoping to give others some help and tips
Use Yarn for package management
Using Babel as a jsx and es6 syntax compiler
Webpack module management and packaging
The tutorial is based on macOS. Nodejs must be installed in advance. My Nodejs and npm versions are as follows
node -v v6.9.2 npm -v 3.10.9
Yarn installation and configuration
We can use the brew To install, as follows
brew update brew install yarn
Yarn downloads packages or modules from the same source as npm. For some reasons, the download speed is very slow and uncomfortable, so we have to change the source, as follows
yarn config set registry ' https://registry.npm.taobao.org '
Check whether the source change is successful
yarn config get registry
Project Initialization
Open your terminal, create a new folder, enter the folder, and use yarn init To initialize, the process is similar npm init , there will be several options you need to fill in, you can fill in according to your needs, here I will directly return all the way.
mkdir react-demo cd react-demo yarn init
init After that, you will be prompted success Saved package.json , indicating that the initialization is successful, we can check package.json What is there
vim package.json
{ "name": "react-demo", "version": "1.0.0", "main": "index.js", "license": "MIT" }
Webpack installation and configuration
yarn add webpack webpack-dev-server path
After installation, you will find that there are more directories yarn.lock This file is used by Yarn to lock the current dependency. Don't worry
Now that we have installed the webpack, we need a configuration file to execute it, as follows
touch webpack.config.js
Then update the file as follows
const path = require('path'); module.exports = { entry: './client/index.js', output: { path: path.resolve('dist'), filename: 'index_bundle.js' }, module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ } ] } }
From the content of the configuration file, we need an entry for webpack to run entry And an output output
In order for JSX code or ES6 code to run normally in the browser, we need to loaders To load babel-loader
added loaders We can check Webpack document
Babel installation and configuration
yarn add babel-loader babel-core babel-preset-es2015 babel-preset-react --dev
In the webpack configuration process, we used babel-loader In addition to this, we also need other dependencies of babel
babel-preset-es2015 and babel-preset-react These two are Babel's plug-ins, telling Babel to es2015 and react The code for is compiled as Vanilla JS
After installation, we need to configure Babel and create a new file as .babelrc
touch .babelrc
Then update the file as follows
{ "presets":[ "es2015", "react" ] }
Loader in webpack babel-loader This is the basis for implementation
Configure Portal File
Now our directory structure is as follows
|-- node_modules |-- .babelrc |-- package.json |-- webpack.config.js |-- yarn.lock
We need to create a new folder and create a new folder index.js and index.html file
mkdir client cd client touch index.js touch index.html
Then let's update index.js The content of is
console.log('Hello world!')
Similarly, we also need to update index.html The content is
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>React App Setup</title> </head> <body> <div id="root"> </div> </body> </html>
index.html It is the carrier that our react component runs on the browser. The react component is written in jsx, and also uses es6. Because most browsers do not support es6 and jsx, we must compile these codes through Babel, and then bind the output to display on index.html.
At the same time, we also need html-webpack-plugin Package generates html for us
cd .. yarn add html-webpack-plugin
After installation, open webpack.config.js Then add the following configuration information
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ template: './client/index.html', filename: 'index.html', inject: 'body' }) module.exports = { ... module: { loaders: [ ... ] }, plugins: [HtmlWebpackPluginConfig] }
We introduce html-webpack-plugin , then create its instance, and configure template 、 filename and inject , where inject: 'body' It tells the plug-in to add JavaScript to the footer before closing the body tag
In order to run it, we need to configure package.json , on "dependencies": {} Insert the following code before the code block
"scripts": { "start": "webpack-dev-server" },
Then we can run
yarn start
The following contents appear on the terminal
Project is running at http://localhost:8080/
We open the browser and enter http://localhost:8080/ , in the developer tool's Console , found a piece of information Hello world!
React installation and configuration
yarn add react react-dom
Then enter client Directories, creating components
cd client mkdir components cd components touch App.jsx cd ../..
Now our project directory structure is as follows
|-- node_modules |-- client |-- components |-- App.jsx |-- index.html |-- index.js |-- .babelrc |-- package.json |-- webpack.config.js |-- yarn.lock
Then let's update App.jsx The contents of the document are as follows
import React from 'react'; export default class App extends React.Component { render() { return ( <div style={{textAlign: 'center'}}> <h1>Hello World Again</h1> </div>); } }
We also need to modify our entry file index.js , replaced by the following
import React from 'react'; import ReactDOM from 'react-dom'; import App from './components/App.jsx'; ReactDOM.render(<App />, document.getElementById('root'));
Then input at the terminal yarn start
Refresh http://localhost:8080/ , you can see Hello World Again
So far, through Yarn package management, configure webpack and Babel to build a new development environment for writing react components
This article is written by Chakhsu Lau Creation, adoption Knowledge Sharing Attribution 4.0 International License Agreement.
All articles on this website are original or translated by this website, except for the reprint/source. Please sign your name before reprinting.
