Implement cli mode

This commit is contained in:
SleepWalker 2016-08-30 10:02:00 +03:00
parent 7e618b23df
commit bfcf4971f6
5 changed files with 54 additions and 31 deletions

View File

@ -20,7 +20,7 @@
"test": "karma start ./karma.conf.js",
"lint": "eslint ./src",
"i18n": "cd ./scripts && ./node_modules/.bin/babel-node i18n-collect.js",
"build": "rm -rf dist/ && webpack --progress --colors -p",
"build": "rm -rf dist/ && NODE_ENV=production webpack --progress --colors",
"render": ""
},
"dependencies": {

View File

@ -0,0 +1,7 @@
export default function Register({username}) {
return (
<div>
You Have Been Registered, {username}!
</div>
);
}

View File

@ -0,0 +1,3 @@
import Register from './Register';
export default Register;

View File

@ -2,12 +2,34 @@ import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactDOMServer from 'react-dom/server';
import { IntlProvider } from 'react-intl';
ReactDOM.render(
import Register from 'emails/register';
const isCli = typeof window === 'undefined';
const App = ({type, payload = {}}) => (
<IntlProvider locale="en" messages={{}}>
<div>Hello world</div>
</IntlProvider>,
document.getElementById('app')
{isCli
? (
<Register {...payload} />
) : (
<div>
Hello world
<Register {...payload} />
</div>
)
}
</IntlProvider>
);
if (isCli) {
module.exports = {
default: (props) =>
ReactDOMServer.renderToStaticMarkup(<App {...props} />)
};
} else {
ReactDOM.render(<App />, document.getElementById('app'));
}

View File

@ -1,19 +1,17 @@
/* eslint-env node */
var path = require('path');
const path = require('path');
var webpack = require('webpack');
var loaderUtils = require('loader-utils');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var cssUrl = require('webpack-utils/cssUrl');
var cssImport = require('postcss-import');
var vendor = Object.keys(require('./package.json').dependencies);
const webpack = require('webpack');
const loaderUtils = require('loader-utils');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const cssUrl = require('webpack-utils/cssUrl');
const cssImport = require('postcss-import');
const rootPath = path.resolve('./src');
const isProduction = process.argv.some((arg) => arg === '-p');
const isProduction = process.env.NODE_ENV === 'production';
process.env.NODE_ENV = isProduction ? 'production' : 'development';
@ -48,14 +46,16 @@ const cssLoaderQuery = {
var webpackConfig = {
entry: {
app: path.join(__dirname, 'src'),
vendor: vendor
app: path.join(__dirname, 'src')
},
target: isProduction ? 'node' : 'web',
output: {
path: path.join(__dirname, 'dist'),
publicPath: '/',
filename: '[name].js?[hash]'
filename: isProduction ? '[name].js' : '[name].js?[hash]',
libraryTarget: isProduction ? 'commonjs' : undefined
},
resolve: {
@ -92,22 +92,13 @@ var webpackConfig = {
new HtmlWebpackPlugin({
template: 'src/index.ejs',
favicon: 'src/favicon.ico',
hash: isProduction,
filename: 'index.html',
inject: false,
minify: {
collapseWhitespace: isProduction
}
inject: false
}),
new webpack.ProvidePlugin({
// window.fetch polyfill
fetch: 'imports?this=>self!exports?self.fetch!whatwg-fetch'
}),
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js?[hash]')
].concat(isProduction ? [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin()
] : []),
React: 'react'
})
],
module: {
loaders: [