generator-react-webpack中文文档|generator-react-webpack js中文教程|解析

npm npmdoc 2年前 (2022-01-01) 519次浏览

generator-react-webpack中文文档|generator-react-webpack js中文教程|解析

安装命令:npm i generator-react-webpack

generator-react-webpack V3.0 (legacy)

这是当前稳定 3.x 版本的分支。它只会收到错误修正,但不会收到新功能。确保使用 master 为最新版本。

在 https://gitter.im/newtriks/generator-react-webpack 加入聊天 构建状态 每月下载量 依赖追踪器 依赖追踪器 节点版本

用于ReactJS 的Yeoman 生成器– 让您快速设置包括 karma 测试运行器和Webpack模块系统的项目。

关于

Generator-React-Webpack 将帮助您使用现代技术构建新的 React 项目。

开箱即用,它支持:

  • 网络包
  • ES2015 通过 Babel-Loader
  • 支持不同的样式语言(sass、scss、less、stylus)
  • 通过 PostCSS 进行样式转换
  • 通过 esLint 自动代码 linting
  • 能够通过 Karma 和 Mocha/Chai 对组件进行单元测试

2.0 版的变化

这个生成器是用 ES2015 编写的。这意味着它与 4.0 之前的 node.js 版本不兼容

它也不会包括助焊剂框架的支持了。相反,我们将使用它作为其他生成器构建的基础。这将使基础生成器更易于使用和更新。

如果您有兴趣,可以随意编写自己的生成器并使用 generator-react-webpack 作为基础(通过组合)。

如果您使用 generator-react-webpack 构建了一个生成器,请告诉我们,我们将添加一个链接到我们的自述文件。

扩展 generator-react-webpack 的生成器


安装

# Make sure both is installed globally 
npm install -g yo
npm install -g generator-react-webpack

设置项目

# Create a new directory, and `cd` into it: 
mkdir my-new-project && cd my-new-project
 
# Run the generator 
yo react-webpack

请务必编辑您新生成的package.json文件以设置描述、作者信息等。

生成新组件

# After setup of course :) 
# cd my-new-project 
yo react-webpack:component my/namespaced/components/name

上面的命令将创建一个新组件,以及它的样式表和一个基本的测试用例。

生成新的无状态功能组件

yo react-webpack:component my/namespaced/components/name --stateless

React v0.14 中引入的无状态功能组件。它们的语法比常规的要短得多,而且根本没有状态或生命周期方法。请阅读React 0.14 发行说明以获取有关这些组件的更多信息。

注意:您仍然可以为无状态组件设置属性!

添加 PostCSS 插件

如果已经启用PostCSS在生成时,通过NPM安装您PostCSS插件和需要postcss在功能CFG / base.js

自动前缀示例:

cd my-new-project
npm install autoprefixer

cfg/base.js 中需要

...
postcss: function () {
  return [
    require('autoprefixer')({
      browsers: ['last 2 versions', 'ie >= 8']
    })
  ];
}
...

用法

以下命令在您的项目中可用:

# Start for development 
npm start # or 
npm run serve
 
# Start the dev-server with the dist version 
npm run serve:dist
 
# Just build the dist version and copy static files 
npm run dist
 
# Run unit tests 
npm test
 
# Lint all files in src (also automatically done AFTER tests are run) 
npm run lint
 
# Clean up the dist directory 
npm run clean
 
# Just copy the static assets 
npm run copy

命名组件

我们选择遵循@floydophone大写约定来命名组件文件,例如Component.js如果有人普遍反对这一决定,我愿意接受建议。

模块

每个组件都是一个模块,可以使用Webpack模块系统来要求Webpack使用Loaders,这意味着您还可以需要 CSS 和许多其他文件类型。阅读Webpack 文档以了解更多信息。

道具

感谢Edd Hannay的 Webpack 优化,我的本地合并和测试意味着他的添加丢失了他的签名(我的错,抱歉)。所以,非常感谢艾德。

贡献

欢迎投稿。提交错误修复时,请编写一个测试来暴露错误并在应用修复之前失败。与修复一起提交测试。

运行测试

npm test 或者 node node_modules/.bin/mocha

执照

麻省理工学院执照

项目贡献人员列表:


极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:generator-react-webpack中文文档|generator-react-webpack js中文教程|解析
喜欢 (0)
.excerpt .focus {display:none}