webpacker-react, 在你的Rails 应用程序中,Webpacker插件用于集成

分享于 

10分钟阅读

GitHub

  繁體 雙語
Webpacker plugin to integrate React in your Rails application
  • 源代码名称:webpacker-react
  • 源代码网址:http://www.github.com/renchap/webpacker-react
  • webpacker-react源代码文档
  • webpacker-react源代码下载
  • Git URL:
    git://www.github.com/renchap/webpacker-react.git
    Git Clone代码到本地:
    git clone http://www.github.com/renchap/webpacker-react
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/renchap/webpacker-react
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    webpacker响应 CircleCI

    注意:注意:这是Git主机分支的文档。 这里提供了最新版本的( 0.3.2 ) 文档,请参考。

    Webpacker响应使你可以在 Rails 应用程序中轻松使用响应Webpacker。

    它支持 Webpacker 1.2 +。

    有一个示例应用程序可用: https://github.com/renchap/webpacker-react-example/

    安装

    你的Rails 应用程序需要使用Webpacker并完成响应集成。 请参考他们的文档文档: https://github.com/rails/webpacker/blob/master/README.md#ready-for-react

    首先,你需要将webpacker响应 gem 添加到 Rails 应用程序 Gemfile:

    gem 'webpacker-react', "~> 0.4.0"

    完成后,运行 bundle 安装 gem。

    然后需要更新 package.json 文件以包含 webpacker-react NPM模块:

    ./bin/yarn add webpacker-react

    现在一切就绪 !

    关于版本的说明

    webpacker响应包含两部分:一个 Javascript MODULE 和一个 ruby gem。 这两个组件都尊重语义版本控制。 升级时,需要将 NPM MODULE 升级到同一次次版本。 新版本可以独立于两个版本发布,因此可以在版本2 和版本2 中使用 NPM MODULE,但是你永远不应该有不同的A 或者 X

    用法

    第一步是对 root 组件的( 要从HTML加载的那些) 进行 register。 在包文件( app/javascript/packs/*.js ) 中,导入组件以及 webpacker-react 和 register。 考虑到你在 app/javascript/components/hello.js 中有一个组件:

    importHellofrom'components/hello'importWebpackerReactfrom'webpacker-react'WebpackerReact.setup({Hello}) // ES6 shorthand for {Hello: Hello}

    带Turbolinks的

    你必须确保在调用 WebpackerReact.initialize() 之前加载了 Turbolinks。

    例如:

    importHellofrom'components/hello'importWebpackerReactfrom'webpacker-react'importTurbolinksfrom'turbolinks'Turbolinks.start()WebpackerReact.setup({Hello})

    你也可以在常规的资产管道 application.js 中加载 turbolinks:

    //= require"turbolinks"

    在这种情况下,请确保你的包是在之后加载

    现在你可以从视图或者控制器中呈现响应组件。

    从视图中进行渲染

    使用 react_component helper 第一个参数是组件的NAME,第二个参数是 props:

    <%= react_component('Hello', name:'React') %>

    你可以传递 tag 参数来在另一个标记中呈现响应组件,而不是默认的div。 所有其他参数都将传递给 content_tag:

    <%= react_component('Hello', { name:'React' }, tag::span, class:'my-custom-component') %># This will render <spanclass="my-custom-component"data-react-class="Hello"data-react-props="..."></span>

    从控制器输出

    classPageController <ApplicationControllerdefmain render react_component:'Hello', props: { name:'React' }
     endend

    可以使用 tag_options 参数来更改生成的HTML,类似于 react_component 方法 上面:

    render react_component:'Hello', props: { name:'React' }, tag_options: { tag::span, class:'my-custom-component' }

    你还可以将任何常用参数传递给这里调用中的render: layoutstatuscontent_type 等。

    注意:在浏览器可用之前,需要通过手动运行 ./bin/webpack 或者运行 ./bin/webpack-watcher 进程,让代码服务器处理代码。

    热 MODULE 替换

    HMR 允许 reload/add/remove 模块在浏览器中实时运行,而无需重新加载页面。 这允许在保存时应用对React组件所做的任何更改,保留它们当前的状态。

    安装 react-hot-loader ( 版本 4 ):

    
    ./bin/yarn add react-hot-loader@4
    
    
    
    

    更新你的Babel或者 web service配置。 如果没有与标准Webpacker配置显著的区别,我们提供一个便利函数,以添加对配置的必要更改:

    // config/webpack/development.js// This assumes Webpacker 3+constenvironment=require("./environment")constwebpackerReactconfigureHotModuleReplacement=require('webpacker-react/configure-hot-module-replacement')constconfig=environment.toWebpackConfig()module.exports=webpackerReactconfigureHotModuleReplacement(config)

    如果你喜欢手工做,你需要在你的Babel插件( 在 .babelrc 或者 .babelrc.js 中) 中添加 react-hot-loader/babel。 你只能将它包括在开发中。

    一旦配置了 Babel,就需要为HMR设置 webpack-dev-server。 这很简单,只需在你的webpacker.yml 中使用 switch hmr: true 进行开发 !

    你现在需要使用 webpack-dev-server ( 代替 webpack 或者 webpack-watcher )。

    最后,为你的root 组件( 你们的register 和 WebpackerReact.setup ) 启用响应热加载程序:

    // For example in app/javascripts/components/hello.jsimportReactfrom'react'import { hot } from'react-hot-loader'constHello= () =><div>Hello World!</div>// This is the important line!exportdefaulthot(module)(Hello)

    插件开发

    要在本地处理这个 gem,首先需要克隆和设置示例应用程序的示例。

    然后你需要更改示例应用程序Gemfile指向你的本地存储库并运行 bundle afterwise:

    gem 'webpacker-react', path:'~/code/webpacker-react/'

    最后,使用 yarn link,你需要告诉纱线使用你的NPM MODULE的本地副本:

    
    $ cd ~/code/webpacker-react/javascript/webpacker_react-npm-module/
    
    
    $ yarn
    
    
    $ cd dist/
    
    
    $ yarn # compiles the code from src/to dist/
    
    
    $ yarn link
    
    
    success Registered"webpacker-react".
    
    
    info You can now run `yarn link"webpacker-react"` in the projects where you want to use this module and it will be used instead.
    
    
    $ cd ~/code/webpacker-react-example/
    
    
    $ yarn link webpacker-react
    
    
    success Registered"webpacker-react".
    
    
    
    

    在示例应用程序目录中启动 ./bin/webpack-watcher./bin/rails server 之后,现在可以在本地 webpacker-react 存储库中更改 ruby 或者Javascript代码,并使用示例应用程序立即测试它。

    测试

    如果你更改了本地javascript包,首先确保它是构建( 查看 上面 )。

    要运行测试套件:

    $ rake test

    如果更改了javascript代码,请确保提交前没有任何样式错误:

    $ cd javascript/webpacker_react-npm-module/
    $ yarn lint

    Bug 报告和拉请求在GitHub的https://github.com/renchap/webpacker-react 欢迎。 如果你希望添加你的需求和功能,请随意打开。

    • 服务器端渲染( #3 )

    谢谢

    这个 gem的灵感来自于响应 railsreact_on_rails。 感谢他们的作者 !


    WEB  INT  plugin  react  rails  WEBP  
    相关文章