准备做React+Backbone的集成开发,同事之前已经做了自定义Backbone的脚手架,我今天来做React的。
准备工作,安装Node,yeoman就不多说了,什么?不会?你做什么自定义脚手架啊,先自行google去吧
1.安装目录 我的目录是:home/mike/mywork/study/gitcode/
2.安装generator 安装:在命令行输入:npm install -g generator-generator
说明: yo generator 生成器一个新的生成器的向导
yo generator:subgenerator Name 一个以Name为名字的子生成器
步骤一:在命令行输入yo generator
按照向导提示输入,我的generator的名字叫reacttiny 第一步写github名字(不填写也可以),第二步写上reacttiny即可,然后其他默认 之后就等待生成对应的generator-reacttiny目录 目录内容如下:
.
├── generators
│ └── app
│ ├── index.js
│ └── templates
│ ├── _bower.json
│ ├── _package.json
│ ├── editorconfig
│ └── jshintrc
├── .editorconfig
├── .gitattributes
├── .gitignore
├── .jshintrc
├── .travis.yml
├── .yo-rc.json
├── package.json
├── README.md
└── test
└── test-app.js
步骤二: 这时候,cd 进入generator-reacttiny目录, 我们在命令行输入:npm link
,就可以在命令行使用这个生成器了
步骤三: 此时,命令行输入:yo reacttiny
尝试一把看看,就可以看到yeoman大爷了。。。
我们当然可以直接在app的index里开发我们的生成器了, 使用的时候直接使用yo reacttiny即可,但是我要做好几个自定义生成器那怎么办呢?
步骤四: 命令行目录还在generator-reacttiny下, 在命令行输入 yo generator:subgenerator react
注意, yo generator:subgenerator是命令,react就是我们子生成器的名字。之后会在generators目录下自动生成相应的模板文件,和app目录一模一样,此时文件夹名称叫做react
步骤五: 此时就可以在react目录下开发了,其实脚手架目的是根据用户在控制台的输入编写模板文件,最后生成模板文件。
3.用到的包有:handlerbars,open,react,rimraf,chalk,mocha,yosay,yeoman-generator
4.generator方法的执行顺序
对于那些会自动执行的函数,他们是有一个优先顺序的,下面这些函数是按顺序的一个一个执行的。
- initializing - 你的初始化函数,就是构造函数,主要就是检查一下参数什么的
- prompting - 给用户展示你的菜单,选点东西什么的
- configuring - 保存配置信息,创建类似.editorconfig的文件
- default - 就是默认,只要不在这个列表里的函数都在这个位置执行
- writing - 创建模板文件
- conflicts - 处理异常和冲突
- install - 装npm和bower依赖什么的
- end - 打个命令行祝贺使用者成功了
5.上传到npm 如果想将此包上传到npm上,则需要在命令行中的generator-reacttiny目录下输入npm adduser
无注册用户,按提示步骤先增加个用户npm login
有注册,用户先登录npm publish --access=publish
发布即可
PS:在grunt中加入自动编译Jsx文件插件 前提使用yeoman构建了项目
1.在Gruntfile.js文件目录下,安装grunt-react和grunt-browserify命令行输入:npm install grunt-react --save
npm install grunt-browserify --save
2.在Gruntfile.js的watch中增加以下代码,自动监听编译jsx代码为js代码 指定react的jsx目录
watch: {
react:{
files: ['<%= config.app %>/react/{,*/}*.jsx'],
tasks: ['react:dynamic_mappings', 'react:single_js_files']
},
browserify:{
files: ['<%= config.app %>/react/{,*/}*.jsx'],
tasks: ['browserify:options']
}
}
3.在Gruntfile.js的initConfig中增加react和browserify 指定react的jsx目录和js的输出目录
grunt.initConfig({
react: {
single_js_files: {
files: {
'<%=config.app%>/react/output/hello.js': '<%=config.app%>/react/hello.jsx'
}
},
combined_file_output: {
files: {
'path/to/output/dir/combined.js': [
'path/to/jsx/templates/dir/input1.jsx',
'path/to/jsx/templates/dir/input2.jsx'
]
}
},
dynamic_mappings: {
files: [
{
expand: true,
cwd: '<%=config.app%>/react',
src: ['**/*.jsx'],
dest: '<%=config.app%>/react/output',
ext: '.js'
}
]
}
},
browserify: {
options: {
transform: [ require('grunt-react').browserify ]
},
app: {
src: '<%= config.app %>/react/hello.jsx',
dest: '<%= config.app %>/react/output/dist/hello.js'
}
},
});
4.在Gruntfile.js中加入以下两行,加载两个任务
grunt.loadNpmTasks('grunt-react');
grunt.loadNpmTasks('grunt-browserify');
5.在grunt:serve这里加上 'react'和'browserify'
grunt.registerTask('serve', 'start the server and preview your app', function (target) { if (target === 'dist') { return grunt.task.run(['build', 'browserSync:dist']);
}
grunt.task.run([ 'clean:server', 'wiredep', 'concurrent:server', 'postcss', 'browserSync:livereload', 'watch', 'react', 'browserify' ]);
});
6.在默认任务里加上,可以使用grunt --verbose --force命令
查看文件生成细节
grunt.registerTask('default', [
'newer:eslint',
'test',
'build',
'react',
'browserify'
]);
参考:
1.generator-generator
2.yeoman
3.grunt-react
相关推荐
#yeoman生成自己项目文件脚手架(react)准备做React+Backbone的集成开发,同事之前已经做了自定义Backbone的脚手架,我今天来做React的。准备工作,安装Node,yeoman就不多说了,什么?不会?你做什么自定义脚手架啊,...
与其他Yeoman生成器一样,此生成器仅为Office加载项项目创建文件的脚手架。 您可以选择使用纯HTML,CSS和JavaScript或使用Angular或React创建Office加载项项目,还可以在JavaScript和Typescript之间进行选择。 注意...
React应用程序生成器搭建 React Web 应用程序的 Yeoman 生成器。特征CSS 自动前缀(新) 带有 LiveReload 的内置预览服务器自动 lint 你的脚本使用Bower 组件。 令人敬畏的图像优化(通过 OptiPNG、pngquant、...
react 组件生成器 使用 $ npm i generator-react-component-gen yo -g $ mkdir demo $ cd demo && yo react-component-gen $ npm install $ npm start 或者 npm run server npm start 只会启动服务器 npm run server...
用法全局安装Yeoman和生成器: npm install - g yo generator - react - flask 使用Yeoman运行生成器: yo react-flask 生成器要求您提供项目名称,名称,电子邮件地址和GitHub用户名。 它使用它们来配置生成的文件...
发电机React-umd 一个用 UMD 包裹的 ES6 React 组件的简约脚手架。 包括: 从 ES6 编译。 UMD 包装。 使用jsdom和 Mocha 进行测试。 使用 BEEFY 的开发服务器。用法启动 BEEFY 开发服务器。 npm start 运行 Mocha ...
生成器-jswidget 入门 首先,您必须在系统上安装和 。 接下来,安装这个生成器: npm install -g generator-jswidget 然后,为您的应用程序创建一个新目录,并从该目录运行yo jswidget并按照说明进行操作。
Flux项目支架 子发电机,用于React成分 测试设置(用) Sass脚手架与 使用npm完成构建过程JS构建JS捆绑(使用 ) 外部源图ES6 + JSX转译(使用 ) CSS构建SASS转码资产副本将所有资产复制到public/ 服务于浏览器观看...
React 组件库生成器创建可共享的 React 组件库所需的一切表中的内容故事书预设插件故事格式SASS 样式组件/情感呢? 发布流程快速解释出版在本地运行问题和评论执照 为什么创建这个项目的想法是在尝试使用create-...
首先确保自己安装了nodejs,然后全局安装yeoman npm install -g yo 然后直接安装脚手架 npm install -g generator-reactpackage 创建React项目 mkdir admins 创建一个 admins 文件 cd admins 进入 admins yo ...
生成器-bspaulding-react...入门安装 yeoman: npm install -g yo 安装这个生成器: npm install -g generator-bspaulding-react-webpack 在您的项目目录中运行此生成器: yo bspaulding-react-webpack布局dist/ index....
约曼(Yeoman)发生器,利用为React组分产生支架。 入门 安装约曼 npm install -g yo 安装React底板发生器 npm install -g generator-react-baseplate 为您的组件创建一个目录 mkdir test-component cd test-...
什么 Webpack入门模板。 包括: 巴别塔 React和jsx Sass样式表 CSS模块 PostCSS +自动前缀 图像加载器 具有热重载的Dev服务器 有关详细信息,请参见webpack.config.js 。...创建yeoman生成器以轻松搭建脚手架( )
脚手架基于另一个很棒的Microsoft MVP(我认为应该授予终身MVP),即yeoman生成器,称为 正常工作的React组件(例如ListForm和FormField及其接口)由一个单独的NPM包提供,我投入了我的灵魂(因此,如果不好,不要太...
要生成一个新项目,只需打开控制台,转到特定的项目文件夹,然后键入以下内容: veams new project 而已。 只需回答问题并生成您的个人项目即可。 所有依赖项和任务文件将自动下载和配置。 您可以通过以下方式...
npm install -g yonpm install -g generator-brain-cli 然后生成您的新项目: yo brain-cli认识约曼约曼有一颗金子般的心。 Yeoman是一个有感情和见解的人,但很容易与他人合作。 约曼有时会过于自以为是,但很容易...
这是React-Skygear应用程序的yeoman生成器。 它扩展了 。 应用程序中的内容: API和端点配置 用户使用简单的UI进行注册/登录。 请按照以下步骤创建一个React-Skygear应用程序: 先决条件 确保您使用的是node5.0 +...
用法 nyg生成器的功能类似于yeoman。 要使其运行,只需执行以下步骤: npm i nyg -gnpm i nyg-jam3 -gcd your-project-directorynyg nyg-jam3 然后,系统将提示您一些问题,这些问题将定义项目。 然后,适当的文件将...
我们建议您使用我们创建的Yeoman生成器立即启动并运行。 如果您需要更多自定义内容,可以按照我们的入门指南将Mortar引导到您的工作流程中! 请查看 ,以获取有关使用Mortar开发的更多信息。 自动安装 最简单的入门...