generator-keystone-reactを試す @0.0.11

4592 ワード
Node.js KeystoneJS React Node.js テキストリンク

はじめに

先日 generator-keystone-react というリポジトリを見つけたので試して見ることにしました。

先に結論を書くと１年近くリポジトリは更新されておらず、react化は先に管理画面で進んでいることもあり、ここは今後開発進まないのかなと思っています。webpackに移行したいという話もあり、継続されるとしては実装方法は全然別物になりそうです。

せっかくinstallしたので
主だった部分のコードを貼っておいたのご参考まで。

準備

既に
generator-keystone
でKeystoneを利用できている（環境が整っている）前提です

また今回試した環境は
node: v6.9.1
npm: 3.10.8
OS: MacOS
です。

install

README.mdの通り

npm install -g generator-keystone-react

yo keystone-react

を実行

Welcome to the Keystone React generator!

? What is the name of your project? My Site
? Would you like to create a new directory for your project? No


   create package.json
   create keystone.js
   create .editorconfig
   create .gitignore
   create .jshintrc
   create Procfile
   create client/scripts/application.js
   create models/User.js
   create public/favicon.ico
   create public/styles/site.less
   create public/styles/site.min.css
   create routes/index.js
   create templates/views/index.jade
   create updates/0.0.1-admins.js

Running npm install...

<以下略>

開発中のようで、非常にシンプルな構成ですね。選択肢も少ないです。

起動

せっかちなのですぐ実行

node keystone.js

HTMLソース

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>My Site</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <link href="/styles/site.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="app"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCBroD1_P_WPvdhf3uyBxRzPiRbKvLiLBk"></script>
    <script src="/js/application.js"></script>
  </body>
</html>

google mapが入ってしまっているのはリポジトリ上では削除されているようです。

jadeファイル

doctype html
html
    //- HTML HEADER
    head
        meta(charset="utf-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        meta(http-equiv="X-UA-Compatible" content="IE=edge")

        title My Site
        link(rel="shortcut icon", href="/favicon.ico", type="image/x-icon")

        //- Customise the stylesheet for your site by editing /public/styles/site.less
        //- All .less files will be automatically compiled and minified in production.
        link(href="/styles/site.min.css", rel="stylesheet")

    //- HTML BODY
    body
        #app
        script(src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCBroD1_P_WPvdhf3uyBxRzPiRbKvLiLBk')
        script(src='/js/application.js')

applicaton.js

var React = require('react');

var App = React.createClass({
    render: function() {
        return (
            <div>Hello World</div>
        );
    }
});

React.render(
    <App />,
    document.getElementById('app')
);

jsの出力方法

    app.use('/js', browserify('./client/scripts', {
        transform: [babelify.configure({
            plugins: ['object-assign']
        })]
    }));
com.alibaba.fastjson.JSON操作
ギルバート色のブレンドモードのリバースエンジニアリング