Rapid construction of REACT+WEBPACK+ES6 scaffold using Yeoman

Since the beginning and end of the separation, the front-end project engineering has become more and more important, before writing a building based on Angular+Requirejs+Grunt the front-end project tutorial, interested can point here to see

But some projects can be used this way, but some are not, or we just want to try a new framework. For example, I recently tried to use webpack+react+es6 the way to develop projects, feeling very good, and then many projects in this way. So in order not to need to start every time the development of new files from scratch, think of can get a tool, use the command can quickly generate such a run of the project template, just, there is a tool called yeoman .

Highlights of this article:

1. Teach you yeoman to use rapid development of your own scaffolding.
2. Introducing the scaffolding template written by the author generator-reactpackage , the development of this project is based on the webpack+react+es6 project features include:
   • Start Local Service, default listener port 8888
   • CSS files can automatically complete the prefix of the CSS3 property
   • Include routing functionality (React-router)
   • Use npm run dev the command to start the service, modify the save file when the browser will automatically refresh
   • If you do not want the ability to refresh in real time, change the devserver configuration of the Webpack.config.js file to Inline:false
   • Using npm run build packaged files, JS and CSS are packaged separately, and files are compressed by default

Development Scaffold Environment Preparation

Install or update your node and NPM

NPM install-g n //First install n module n stable //upgrade node. js to the latest stable version n 5.0. 0 //or specify version upgrade Node-v //Check whether the update was successful

Then install Yeoman

NPM Install-g yo

Create a Directory

Create a new generator-xxx folder named (Yeoman Scaffold naming convention), I'm calling here generator-reactpackage . Then execute the npm init create Package.json file under directory. Modified to:

{"name": "Generator-reactpackage", "version": "0.0.4", " description": "Ract+webpack-based project directory Quick Generator", " main": "Index.js", "Scripts": {"test": "echo \" Error:no test specified\ "&& exit 1" },"Repository": {"type": "git", "url": "Https://github.com/luckykun/generator-reactpackage.git" },"keywords": ["Yeoman-generator"]," Author": "Luckykun", " License": "MIT", "Bugs": {"url": "https://github.com/luckykun/generator-reactpackage/issues" }," homepage": "Https://github.com/luckykun/generator-reactpackage", "dependencies": {" Chai": "^3.3.0", " Chalk": "^1.1.1", " Fs-extra": "^0.24.0", " Mocha": "^2.3.3", " yeoman-generator": "^0.24.1", " Yosay": "^1.0.5 "}}

Note: Package.json information must be as complete as possible, or may not be uploaded to Generator-lists

Then new in this directory generators->app->index.js , generators-app-templates as shown in:

• generator-reactpackageis the project folder for the entire NPM package.
• templates目录Inside is the final project template file we will use, the content is a complete front-end project, can be customized.
• index.jsIs the main logical file for the development of scaffolding.

Start development

Then edit the Index.js file:

var path = require (' path '); var chalk = require (' chalk '); //different colors of info var util = require (' util '); var yeoman = require (' yeoman-generator '); var Yosay = require (' Yosay '); //yeoman Popup box var path = require (' path '); var reactpackage = Yeoman. Base.extend ({Infofunction () { This.log (Chalk.green (' I am going to build your app! '));},generatebasic:function () { //According to your own templates directory customization this.directory (' src ', ' src '); //Copy directory this.directory (' data ', ' data '); this.copy (' Package.json ', ' Package.json '); //Copy files this.copy (' index.html ', ' index.html '); this.copy (' readme.md ', ' readme.md '); this.copy (' webpack.config.js ', ' webpack.config.js '); },generateclient:function () { This.sourceroot (Path.join (__dirname, ' templates ')); This.destinationpath ('./'); },install:function () { //install dependent this.installdependencies ({Skipinstall:this.options[' Skip-install '] });},end:function () { This.log (Yosay (' Your app has been created successfully! '));}});module.exports = reactpackage;

The above file is the main logical part. As for the specific syntax, this article can be consulted. Quickly build scaffolding tools based on Yeoman

Upload

Once the development is complete, we can generator-reactpackage upload the project to the NPM website. The steps are as follows:

NPM AddUser //If you do not have an account, use this command to register for NPM login //If you have an account, use this command to login to NPM publish--access=public //upload to NPM website

After successful upload, you will be prompted:

+ [email protected]0.0. 4

Then you can visit http://yeoman.io/generators/here to search for your own package, there is no upload success, such as reactpackage the search will appear I upload scaffolding. Such as:

Attention:

• Before uploading to the NPM website, you need to upload the scaffold project to GitHub.
• Scaffolding Project Package.json file must be as detailed as possible, such as the GIT homepage, readme file links and so on

If you can find the scaffolding you have uploaded, OK, the development of yeoman-based scaffolding tools is here to end, you can use your scaffolding anytime, anywhere to quickly generate project templates. Interested students can go to see I write generator-reactpackage source code, like the classmate by the way to a star~~ haha, thanks ~

Using Scaffolding (Generator-reactpackage)

First make sure you have Nodejs installed and then install yeoman globally.

NPM Install-g yo

Then install the scaffold directly.

NPM install-g Generator-reactpackage

Create a new folder in the right place and run it under a folder:

Yo reactpackage

The following directory structure will then be generated in this directory:

├──data│└──test.json├──src│├──components││└──app.js│├──images││└──yeoman.png│├──styles││└──app.scss│├─ ─vendor││└──jquery.js│├──views││└──home.html├──node_modules├──index.html├──package.json└──webpack.config.js

Careful classmates may have found that the content generated here is what we defined in the scaffolding templates目录 .

Then use the following command:

NPM Run dev// project development process use, start the service, real-time refresh NPM Run build //development after the completion of packaging files (JS, CSS separately packaged)

Attention:

• The default listening port for this project is 8888, so you can see the effect in the browser input http://localhost:8888
• If you execute the above command prompt error: Error: getaddrinfo ENOTFOUND localhost , add in the host file 127.0.0.1 localhost
• The ability to monitor ports and real-time refreshes can be modified in the webpack.config.js file configuration

• If the project is working correctly, you will see the following effect:

To read the original, click here

Rapid construction of REACT+WEBPACK+ES6 scaffold using Yeoman