Shulou(Shulou.com)06/01 Report--

This article mainly shows you "element how to use script automation to build new components", the content is easy to understand, well-organized, hope to help you solve your doubts, the following let the editor lead you to study and learn "element how to use script automation to build new components" this article.

How is the automated build of element-ui done?

In open source projects, especially in the development of UI libraries, there are too many people collaborating, and everyone has different code habits. And each component in the UI library also involves files such as multi-language, unit test, routing, component readme.md documents, and so on. So it is too troublesome to create these slowly every time, and many people modify public files such as routing files will cause a lot of conflicts. So there are a lot of scripts in open source projects to automate the generation of certain files.

Makefile

There is a makefile file in the root directory of the element-ui project, and the purpose of each command is in the comments. Windows users have to download to execute the script using the make command. Mac users do not need it.

@ # default # comments will be output in the log, @ # will not do @ # .PHONY: ignore the following script command to check whether it conflicts with the dist and test directories, that is to say, the command .PHONY: dist test@# executes the make command anyway, the default help script default: help@# executes `make build- theme` is the execution of the `PHON` script @ #: the command is executed before the colon, and the first line after the colon should be a tab,tab followed by the script command @ #, that is to say, the build theme comment on 'tab+npm npm build: theme'# build all theme@#' below can see the screenshot below. Build-theme: npm run build:themeinstall: npm installdev: npm run dev@# $() is output in the log to use the function @ # $@ for the current command itself, such as' make new',$@ is a new@# MAKECMDGOALS special variable, which records the list of targets specified by the command line arguments, that is, using this variable, we can get the command line argument @ # for example, when we create a new component Using the script `make new Wailen` MAKECMDGOALS is equal to the wailen@# filter-out anti-filtering function, filtering out all the contents of $@ in $(MAKECMDGOALS) @ # combined with new.js, the following script means to create a new build, pass in the component name, and the component name must not be new, if the component name is new You can view the screenshot below: new: node build/bin/new.js $(filter-out $@, $(MAKECMDGOALS)) @ # omitted some scripts If you are interested, you can check the source code help: @ echo "\ 033 [35mmake\ 033 [0m\ 033] [1m command instructions\ 033 [0m" @ echo "\ 033 [35mmake install\ 033 [0m\ t\ 033 [0m\ t Mutual]-installation depends on" @ echo "\ 033 [35mmake new [Chinese name]\ 033 [0m\ tMueller-create a new component package. For example, 'make new button button' "@ echo"\ 033 [35mmake dev\ 033 [0m\ t\ 033 [0m\ t Muir]-development mode "@ echo"\ 033 [35mmake dist\ 033 [0m\ t\ 033 [0m\ t\ 033]-compile the project Generate the target file "@ echo"\ 033 [35mmake deploy\ 033 [0m\ t\ 033 [0m\ t\ 033] deploy demo "@ echo"\ 033 [35mmake pub\ 033 [0m\ t\ 033 [0m\ t\ 033 [0m\ t\ 033] [0m\ t\ 033] publish to npm "@ echo"\ 033 [35mmake new-lang\ 033 [0m\ t\ 033 [0m\ t\ 033] 0m\ t \ 033 [0m\ tMurray-add a new language to the website. For example, 'make new-lang fr''

# comment output

Filter the new keyword. When the input parameter is new, filter out

Of course, if you don't want to use make to execute the node script directly, for example, the make new component name is equivalent to the node build/bin/new.js component name

New.js

New.js is the core file of automation. Let's think about it first. Creating a component file is nothing more than two steps.

Create a file

Add content

File-save

The main thing is to create files and add content through the package file-save. Let's take a look at api first.

Const fileSave = require ('file-save'); const content = "const fs = require (' fs') "const callback = () = > {console.log ('script execution')} fileSave ('file path') .write ('file content such as content','utf8', callback above) / / the successful writing of the content triggers a callback .write (' continue adding content','utf8') .end ('\ n') / / file operation ends with a blank line

The following files will be generated

For more documents, please see file-save.

In element-ui, the filename and code content that need to be created are managed through a Files array object.

In this way, you can create the corresponding file by directly looping through Files.

/ / create the directory generated by the package// component const PackagePath = path.resolve (_ _ dirname,'.. / packages', componentname); Files.forEach (file = > {fileSave (path.join (PackagePath, file.filename)) .write (file.content, 'utf8') .end ('\ n'); modification of referenced resource files

In addition, when you create a component, you need to modify the corresponding areas where you need to reference the component, such as the routing configuration file. We can also add corresponding routes through file-save. The file-save itself overwrites the contents of the previous file, that is, it is deleted and regenerated. Therefore, if the operation is done on the basis of the original, you need to get the contents of the original file, and then splice the new content on this basis. We can do this:

Const fileSave = require ('file-save'); const fs = require (' fs'); const content = `const fileSave = require ('file-save'); `const oldCode = fs.readFileSync ('. / demo.js') fileSave ('demo.js') .write (oldCode+content,' utf8') .end ('\ n')

That is, through the fs module to read the old contents of the file, and then splice it. Here's what element-ui does:

Fs.createWriteStream

The principle of file-save is to make a layer of encapsulation through the api of fs.createWriteStream.

In a word, use

Const fs = require ('fs') / / create an object of writable stream fs.WriteStream class, which is inherited from const writer = fs.createWriteStream (' createStream.js', {/ / find the file. If not, the default value is w). When you write data by calling the writer.write method, all the contents of the file will be overwritten directly, and / / all the contents before the file will be deleted Write new data flags:'w'}) / / write data to stream writer.write ('new contents of this file')

For the source code content of file-save, you can see the pseudo code below.

Const savefs = {} savefs._create_dir = function (fp, opts) {mkdirp.sync (fp, opts);} savefs.wstream = function (file) {var ws = fs.createWriteStream (file); this.writer = ws; return this } savefs.write = function (chunk, encoding, cb) {.} savefs.end = function (chunk, encoding, cb) {.} savefs.finish = function (cb) {.} savefs.error = function (cb) {.} export {savefs}

Of course, in fact, we can directly use node's fs.writeFile API to create files.

Fs.writeFile ('file path', 'content to be written', ['encoding'], 'callback function')

You can find that the parameters are the same as file-save.

These are all the contents of the article "how to automate element's scripting to build new components". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.