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:
- Teach you
yeoman
to use rapid development of your own scaffolding.
- 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
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-reactpackage
is 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.js
Is 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.
Then install the scaffold directly.
NPM install-g Generator-reactpackage |
Create a new folder in the right place and run it under a folder:
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:
To read the original, click here
Rapid construction of REACT+WEBPACK+ES6 scaffold using Yeoman