用Node.js写生成器是件非常简单的事儿，原因是
Node.js模块开发简单，js语法，而且二进制cli模块也极其简单
Npm发布包是所有开源的包管理器里最简单好用的
辅助模块多，将近40万个左右
所以为了让大家零基础十分钟搞定生成器，这里精简一下，你只需要5步
初始化模块
cli二进制模块
模板引擎使用
解析cli参数和路径
npm发布
这里假定你已经安装了Node.js，至于是什么版本，如何安装的并不重要。
先要介绍一下，什么是Npm？
https://www.npmjs.com/
npm is the package manager for
browsers
java
nodejs
io.js
mobile
bower
docpad
test
简单理解：NPM（node package manager），通常称为node包管理器。顾名思义，它的主要功能就是管理node包，包括：安装、卸载、更新、查看、搜索、发布等。只要安装了Node.js，它会默认安装的。
它可不只是Node.js package manager，可见其定位是很广的，这从侧面也佐证了大前端和node全栈的机会。以前nodejs吹牛都是那异步说事儿，现在都是拿生态说事儿，这话不错，在09年谈异步，很多语言性能都很弱，但事情要以发展的眼光看，现在很多语言都支持了，而且性能还不错，所以才显得nodejs性能没那么突出。
无论做哪方面工作都可以使用npm，所以使用Node.js来开发各种模块都是非常方便的。
1）初始化模块
确认模块名称
$ npm info xxxxxx
如果没有找到对应的包，说明你可以使用这个名字，然后在github建立仓库，clone到本地即可
$ git clone xxx$ npm init
-
y
生成package.json文件，此文件为模块的描述文件，非常重要。
{
"name"
:
"a"
,
"version"
:
"1.0.0"
,
"deion"
:
""
,
"main"
:
"index.js"
,
"s"
:
{
"test"
:
"echo "Error: no test specified" && exit 1"
},
"keywords"
:
[],
"author"
:
""
,
"license"
:
"ISC"
}
说明
main是模块的入口文件，即普通代码对外提供调用的api入口。
s是npm s非常便利的，只要在package.json所在目录下，你执行npm test就会调用这里的test配置。如果是test，start等内置命令之外的，可以通过npm run xxx来定义
2）cli二进制模块
Node.js分2种模块
普通模块，供代码调用
二进制模块，提供cli调用
大家都知道，生成器是cli工具，所以我们应该使用cli二进制模块
手动修改package.json文件
{
"name"
:
"a"
,
"version"
:
"1.0.0"
,
"deion"
:
""
,
"main"
:
"index.js"
,
"bin"
:
{
"gen"
:
"gen.js"
},
"s"
:
{
"test"
:
"echo "Error: no test specified" && exit 1"
},
"keywords"
:
[],
"author"
:
""
,
"license"
:
"ISC"
}
这里主要增加里一个bin的配置，bin里的gen为cli的具体命令，它的具体执行的文件gen.js，大家看到这是一个plain old object类型，所以可以配置多个命令的，各位可以按照自己的喜好来。
既然gen的执行文件是gen.js，我们当然需要创建创建它
$ touch gen
.
js
填写
#!/usr/bin/env node
var
argv
=
process
.
argv
;
var
filePath
=
__dirname
;
var
currentPath
=
process
.
cwd
();
console
.
log
(
argv
)
console
.
log
(
filePath
)
console
.
log
(
currentPath
)
说明
argv是命令行的参数
filePath是当前文件的路径，也就是以后安装后文件的路径，用于存放模板文件非常好
currentPath是当前shell上下文路径，也就是生成器要生成文件的目标位置
至此，二进制模块的代码就写完了，下面我们测一下
（1）本地安装此模块
在package.json文件路径下，执行
$ npm link
/Users/sang/.nvm/versions/node/v4.4.5/bin/gen ->/Users/sang/.nvm/versions/node/v4.4.5/lib/node_modules/a/gen.js/Users/sang/.nvm/versions/node/v4.4.5/lib/node_modules/a ->/Users/sang/workspace/github/i5ting/a
此时说明已经安装成功了。
（2）执行gen测试
$ gen
['/Users/sang/.nvm/versions/node/v4.4.5/bin/node','/Users/sang/.nvm/versions/node/v4.4.5/bin/gen']/Users/sang/workspace/github/i5ting/a/Users/sang/workspace/github/i5ting/a
可以换不同的目录来测试一下，看看结果的不同，来体会上面3个变量的妙用。
3）模板引擎使用
模板引擎是一种复用思想，通过定义模板，用的时候和数据一起编译，生成html，以便浏览器渲染。从这个定义里我们可以找出几个关键点
编译(模板 + 数据) => html
模板引擎有好多种，下面介绍2种典型的模板引擎
ejs：嵌入js语法的模板引擎（e = embed），类似于jsp，asp，erb的，在html里嵌入模板特性，如果熟悉html写起来就非常简单，只要区分哪些地方是可变，哪些地方是不变即可
jade：缩进式极简写法的模板引擎，发展历史 HAML -> Jade -> Slim -> Slm，最早是ruby里有的，目前以jade用的最多，这种写法虽好，，但需要大脑去转换，这其实是比较麻烦的，如果对html不是特别熟悉，这种思维转换是非常难受的。
更多见 https://github.com/tj/consolidate.js#supported-template-engines
这里我们选一个，目前Node.js里最火的应该也是最好的Nunjucks，我感觉它和ejs比较像，但跟jade一样强大，语法据说出自Python的某款模板引擎
$ npm install
--
save nunjucks
然后我们修改模板引擎
#!/usr/bin/env node
// var argv = process.argv;
// var filePath = __dirname;
// var currentPath = process.cwd();
//
// console.log(argv)
// console.log(filePath)
// console.log(currentPath)
var
nunjucks
=
require
(
'nunjucks'
)
var
compiledData
=
nunjucks
.
renderString
(
'Hello {{ username }}'
,
{
username
:
'James'
});
console
.
log
(
compiledData
)
注释一下前面说的3个变量，这里我们只看nunjucks代码。这是最简单的demo。
（1）引入nunjucks模块
（2）nunjucks.renderString方法是编译模板用的，它有2个参数
第一个是模板字符串
第二个是json数据
（3）compiledData就是编译后的结果
结合上面说的模板引擎原理，
编译(模板 + 数据) => html
再理解一下，效果会更好。
但是这样看来对我们没啥用啊，生成器的内容总不能都写到字符串里吧？所以继续改造，把模板独立出去，然后通过文件读写来获取模板字符串。
创建一个gen.tpl，内容为Hello {{ username }}，下面我们看看如何修改gen.js来读取模板。
var
fs
=
require
(
'fs'
)
varnunjucks =require('nunjucks')
vartpl =fs.readFileSync('./gen.tpl').toString()
varcompiledData =nunjucks.renderString(tpl,{username:'James'});
console.log(compiledData)
（1）引入fs模块，因为要读取文件
（2）fs.readFileSync(’./gen.tpl’).toString()，使用了一个读取文件的同步方法，并把文件内容转成字符串，原来是buffer
读文件还是挺简单吧。那么写文件呢？
fs
.
writeFileSync
(
'./gen.xxx'
,
compiledData
)
至此，一个生成器的模型就出来
#!/usr/bin/env node
var
fs
=
require
(
'fs'
)
var
nunjucks
=
require
(
'nunjucks'
)
var
tpl
=
fs
.
readFileSync
(
'./gen.tpl'
).
toString
()
var
compiledData
=
nunjucks
.
renderString
(
tpl
,
{
username
:
'James'
});
console
.
log
(
compiledData
)
fs
.
writeFileSync
(
'./gen.xxx'
,
compiledData
)
思考一下，可变得有哪些？
'./gen.tpl’是输入模板
{ username: ‘James’ } 要编译的数据
'./gen.xxx’是最终的输出
那么，剩下的事儿就是围绕可变得内容来构造你想要的功能。
4）解析cli参数和路径
要说生成器，最经典的是rails的scaffold，曾经缔造了一个15分钟blog的神话
$ rails g book name
:
string
coordinates
:
string
如果我们要实现它，怎么做呢？
rails g是固定的用于生成的命令
book是模型名称，俗称表名
而name和coordinates都是字段名称，string是表中的类型
可变的只有表名和字段信息。所以只要解析到这些就够了，换成我们的gen命令，大概是这样
$ gen book name
:
string
coordinates
:
string
修改gen.js代码
#!/usr/bin/env node
var
argv
=
process
.
argv
;
console
.
log
(
argv
)
执行gen命令的结果是
$ gen book name
:
string
coordinates
:
string
['/Users/sang/.nvm/versions/node/v4.4.5/bin/node','/Users/sang/.nvm/versions/node/v4.4.5/bin/gen','book','name:string','coordinates:string']
下面构造一个entity对象
var
argv
=
process
.
argv
;
argv
.
shift
()
argv.shift()console.log(argv)
vardata ={model:argv[0],attr:{}
}
for(vari =1;i <argv.length;i++){vararr =argv[i].split(':')vark =arr[0];varv =arr[1];data.attr[k]=v
}
console.dir(data)
执行
$ gen book name
:
string
coordinates
:
string
['book','name:string','coordinates:string']data ={model:'book',attr:{name:'string',coordinates:'string'}
}
那这里的data可以做什么呢？想想模板引擎里的第二个参数~
// tpl compile
varcompiledData =nunjucks.renderString(tpl,data)
修改模板gen.tpl
module
.
exports
=
class
{{
model
}}
{
{%
for
k
,
v
in
attr
%}
{{
k
}}:
{{
v
}},
{%
else
%}
error
{%endfor %}
}
结果gen.xxx为
module
.
exports
=
class
book
{
name
:
string
,
coordinates
:
string
,
}
这里是只是示意，具体当按照你想要的结果为准。
#!/usr/bin/env node
var
fs
=
require
(
'fs'
)
var
nunjucks
=
require
(
'nunjucks'
)
var
argv
=
process
.
argv
;
// var filePath = __dirname;
// var currentPath = process.cwd();
//
// console.log(filePath)
// console.log(currentPath)
// cli parse
argv
.
shift
()
argv
.
shift
()
console
.
log
(
argv
)
var
data
=
{
model
:
argv
[
],
attr
:{
}
}
for
(
var
i
=
1
;
i
<
argv
.
length
;
i
++)
{
var
arr
=
argv
[
i
].
split
(
':'
)
var
k
=
arr
[
];
var
v
=
arr
[
1
];
data
.
attr
[
k
]
=
v
}
console
.
log
(
'data = '
)
console
.
dir
(
data
)
// read tpl
var
tpl
=
fs
.
readFileSync
(
'./gen.tpl'
).
toString
()
console
.
dir
(
data
)
// tpl compile
var
compiledData
=
nunjucks
.
renderString
(
tpl
,
data
)
console
.
log
(
compiledData
)
// write file
fs
.
writeFileSync
(
'./gen.xxx'
,
compiledData
)
下面修改一下路径
tpl从__dirname走
而结果需要写到process.cwd()
也就是我们前面说的那2个没有用到的变量filePath和currentPath。
#!/usr/bin/env node
var
fs
=
require
(
'fs'
)
var
nunjucks
=
require
(
'nunjucks'
)
var
argv
=
process
.
argv
;
var
filePath
=
__dirname
;
var
currentPath
=
process
.
cwd
();
//
// console.log(filePath)
// console.log(currentPath)
// cli parse
argv
.
shift
()
argv
.
shift
()
console
.
log
(
argv
)
var
data
=
{
model
:
argv
[
],
attr
:{
}
}
for
(
var
i
=
1
;
i
<
argv
.
length
;
i
++)
{
var
arr
=
argv
[
i
].
split
(
':'
)
var
k
=
arr
[
];
var
v
=
arr
[
1
];
data
.
attr
[
k
]
=
v
}
console
.
log
(
'data = '
)
console
.
dir
(
data
)
// read tpl
var
tpl
=
fs
.
readFileSync
(
filePath
+
'/gen.tpl'
).
toString
()
console
.
dir
(
data
)
// tpl compile
var
compiledData
=
nunjucks
.
renderString
(
tpl
,
data
)
console
.
log
(
compiledData
)
// write file
fs
.
writeFileSync
(
currentPath
+
'/gen.xxx'
,
compiledData
)
至此，完成了所有代码。此时你在任意目录输入
$ gen book name
:
string
coordinates
:
string
你会发现当前目录下会有一个gen.xxx文件，和我们之前看到的结果一样。
5）npm发布
在package.json目录里执行
$ npm publish
.
就可以了发布成功了。
如果你想增加版本号，再次发布，你需要2步
$ npm version patch$ npm publish
.
你可以自己测试一下
$ npm i
-
g xxxxxx
share给别人吧
更多
异常：各种可能考虑到并处理
测试：按照各位喜好 mocha, ava, jest
工具模块：比如使用debug模块处理调试信息，日志等
argv解析模块：commander 或者yargs
实用工具，比如各种大小写转换，驼峰式等 inflected
最后
生成器理论是可以生成一切内容的，那么生成能够生成器模板代码么？自己想想吧
2、本站永久网址：https://www.yuanmacun.com
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
源码村资源网 » js替换html(js替换html标签)
1 评论