Using yarn to realize a webpack+react seed

Using yarn to realize a webpack+react seed _node.js

Last Update:2017-01-18 Source: Internet

Author: User

Tags node server

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

First, the initialization of the project

First make sure that your node version is >=4.0. And make sure yarn can work properly, about installing yarn, you can see here

Let's create an empty folder first yarn-react-webpack-seed , for example, and then enter the command:

Yarn Init

Yarn If there is no installation, the full use of NPM replacement is no problem.

The project initializes and package.json then fills in some basic information.

Next we start to install the dependencies, and then package.json add the following

"Dependencies": {"
 react": "^15.4.0-rc.4",
 "React-dom": "^15.3.2",
 "React-router": "^2.8.1"
 },
 "Devdependencies": {"
 Babel": "^6.5.2",
 "Babel-core": "^6.17.0",
 "Babel-loader": "^6.2.5", "
 babel-preset-es2015": "^6.16.0", "
 babel-preset-react": "^6.16.0",
 "History": "^4.3.0",
 " React-hot-loader ":" ^3.0.0-beta.6 ","
 webpack ":" ^1.13.2 ",
 " Webpack-dev-server ":" ^1.16.2 "
 },

To run the command:

You can also add dependencies on your own and enter them yarn add xxx .

Yarn Add react 
yarn add webpack--dev 
...

After the project is created, we then create the necessary files and directories;

+ Build
+ src
-webpack.config.js
-Package.json-
index.html-
server.js

Second, Webpack

Webpack (more) is a modular processor that packs all your code into a static file and puts it in your development app.

Open Webpack.config.js, and then add the following code:

var webpack = require (' Webpack ');

Module.exports = { 
 entry: [
  "webpack-dev-server/client?http://localhost:9000",
  ' webpack/hot/ Only-dev-server ',
  "./src/index"
 ],
 output: {
 path: __dirname + '/build ',
 filename: "Bundle.js",
 publicpath: '/build/',
 },
 module: {
 loaders: [
  {
  test:/\.js?$/,
  loaders: [] React-hot-loader/webpack ", ' babel-loader?presets[]=react,presets[]=es2015 '],
  exclude:/node_modules/
  } ,

  {
  test:/\.less$/,
  loader: "Style!css!less"
  }
  ]
 },
 plugins: [
  New Webpack. Noerrorsplugin (),
  new Webpack. Hotmodulereplacementplugin ()
 ]
};

This document has about four configuration items,, entry , output module plugins .

entry: Specifies the packaged entry file, each with a key value pair, which is a portal file.

output: Configure package results, path defines the output folder, filename defines the name of the packaged result file, and the [name] inside the filename is replaced by the key in the entry, and the/build/bundle.js in the example is the generated file.

module: Defines the processing logic for a module, where a series of loaders can be defined with loaders, as well as some regular. When a file that needs to be loaded matches the regular of test, it is processed. Here we use React-hot and Babel. Babel-loader is used to generate JS files when we use ES-6 for development.

loaderprocessing the file, which is why Webpack is powerful. For example, this definition of the general. JS end of the file is done with Babel-loader, and. Jsx end of the file will be Jsx-loader processing, and then after Babel-loader processing. Yarn add these plug-ins. Preset configuration in Babel you can also. babelr file definition:

{
 "presets": ["es2015", "react"],
}

plugins: This defines the plug-ins that need to be used, such as commonsplugin, when packaging multiple portal files, extracts the common parts, generating common.js.

This time we package.json add the script field again,

"Scripts": {
 "start": "Node Server.js",
 "Build": "Webpack--progress--colors"
 }

This time we enter a yarn start command when we will start one webpack server this time you can visit http://localhost:9000/ our page, and if you use it, you yarn run build can automatically generate the file to Bulid/.

Next we create a new index.html file

<!doctype html>

The most important thing in index.html is to introduce bundle.js, index.html you can modify any code at will, it is important to introduce the generated file and the DOM that contains the react rendering.

Third, React-router

To complete the basic creation of the project, we then create the entry file for the Src/index.js project. The code is as follows:

Import react from ' react '; 
Import reactdom from ' React-dom '; 
Import App from './app ';

Reactdom.render (<app/>, document.getElementById (' App '));

Next we'll create some files that contain the routing components src/app.js

Import react, {Component} from ' React '; 
Import {render} from ' React-dom '; 
Import {Router, Route, hashhistory} from ' React-router '; 
Components
import Links from './components/links.js '; 
Import Start from './components/start.js '; 
Import Guide from './components/guide.js '; 
Import how from './components/how.js ';

Class App extends Component { 
 render () {return
 (
  <router history={hashhistory}>
  <route Path= "/" component={links}> <route path= "/start" component={start}/> <route path=
   "/how" component={how}/>
   <route path= "/guide" component={guide}/>
  </Route>
 </router > 
 );
 }

The head is the one we're going react to use and react-router the module to introduce. At the same time we use the component Links,start,guide and so on to introduce. Then we need to configure router

Routeset the specific path and component in.

Let's take a look at how to switch routes, which are stored src/components/links.js in.

Import react from ' react '; 
Import {Link} from ' React-router ' let 
Links = React.createclass ({ 

 render () {return
 (
  <div>
  <aside>

In link we can specify a specific routing address.

The rest is to add components, such as we add a simple start.js to the components below.

Import react from ' react ';

Let-Start = React.createclass ({ 

 render () {return
 (
  <div classname= "C-home" >

Other component code is not shown in detail.

This time we enter yarn run build and we can see that a bundle.js file is generated under build. If you type yarn run start , you can see the page.

Local input yarn start and then access http://localhost:9000 to see what you have written.

For more configuration on React-router, refer to the official documentation tutorial.

Iv. Release

We actually have a lot of ways to get your services online, but the very good thing is that Webpack can easily use the generated files. Where you can quickly put these resource files on the CDN, and then put the index.html on the host, update our script path on it.

This change with yarn installation speed is really faster than the original NPM a lot of almost 10s is finished. It does not take long to wait or switch Taobao NPM mirroring.

Summarize

The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring certain help, if you have questions you can message exchange.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More