ぼくのかんがえたさいきょうのお手軽Reactディレクトリ構成
はじめに
ある程度プログラミングをやっていると、一番悩むのはディレクトリ構成と命名の部分(僕だけかもしれない)。
作るものによってベストな構成は変わってくるけど、とりあえず簡単に叩き台を作りたいって時にはあまり時間を掛けたくないので、テンプレートを作ってみました。
インストール
$ git clone git@github.com:slont/react-sample1.git
$ cd react-sample1
$ npm install
$ gulp build
$ npm start
これでhttp://localhost:3000/top/
にアクセスすれば、ページが見られる(はず)。
こんな感じ。
ディレクトリ構成
react-sample1
├─ dist
├─ node_modules
├─ src ┬─ styles ┬─ components ┬─ footer.scss
│ │ │ └─ header
│ │ └─ layouts ┬─ top - index.scss
│ │ ├─ page1
│ │ ├─ page2
│ │ └─ base.scss
│ │
│ └─ views ┬─ components ┬─ footer.jsx
│ │ └─ header.jsx
│ └─ layouts ┬─ top ┬─ index.html
│ │ ├─ index.js
│ │ └─ top.jsx
│ ├─ page1
│ └─ page2
├─ .gitignore
├─ gulpfile.js
├─ package.json
└─ webpack.config.js
dist
srcからコンパイル&コピーされたファイルが入る。実際にクライアントからアクセスされる場所。
ビルドされると下みたいになる。
dist ┬─ top ┬─ index.html
│ ├─ index.js
│ └─ index.css
├─ page1
└─ page2
それぞれのページでCSSとJSを呼ぶから、ページ毎にスコープが切られてて、まあ静的ページデモ作る時なんかに良いんじゃないかと思ってる。
node_modules
npm install
するとここに入る。
components
Reactの共通コンポーネントを管理する。あくまで一例。
styles
スタイルシートはここで管理したい。後のviewsディレクトリと構成が一緒。
views
HTMLとJS, JSXファイル等のViewにあたるファイルはここで管理すると簡単に管理できそう。もちろん、ルーターを導入すると全然違うと思うけど、あくまでいch(ry
.gitignore
とても大事。
gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var webpack = require('gulp-webpack');
var webpack_config = require('./webpack.config.js');
// コピータスク
gulp.task('copy', function() {
gulp.src(['./src/views/layouts/**/*.html'])
.pipe(gulp.dest('dist'));
});
// sass(scss)コンパイルタスク
gulp.task('sass', function() {
gulp.src(['./src/styles/layouts/**/*.scss'])
.pipe(sass())
.pipe(gulp.dest('dist'));
});
// js, jsxバンドルタスク
gulp.task('webpack', function() {
gulp.src(['./src/views/**/*.js', './src/views/**/*.jsx'])
.pipe(webpack(webpack_config))
.pipe(gulp.dest('dist'));
});
// ビルドタスク
gulp.task('build', ['copy', 'sass', 'webpack']);
// watchタスク
gulp.task('watch', function() {
gulp.watch(['./src/views/**/*.html'], ['copy']);
gulp.watch(['./src/styles/**/*.scss'], ['sass']);
gulp.watch(['./src/views/**/*.js', './src/views/**/*.jsx'], ['webpack']);
});
ビルドとWatch標準装備。
package.json
react-router
入ってるけど気にしてはいけない。
webpack.config.js
var path = require('path');
module.exports = {
context: __dirname + '/src',
entry: {
'top/index': './views/layouts/top/index.js',
'page1/index': './views/layouts/page1/index.js',
'page2/index': './views/layouts/page2/index.js'
},
output: {
path: __dirname + '/dist',
filename: '[name].js'
},
resolve: {
root: [
path.resolve('./src')
]
},
devServer: {
contentBase: 'dist',
port: 3000
},
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
}
]
}
};
後で解説を付け足す。
おわりに
静的ページのデモなんかをさくっと作るのに良さそうな構成だと思う。てかReactあればjqueryほとんどいらなくねえ?って思ったけど、どうなんだろ。