mirror of
https://github.com/fooflington/selfdefined.git
synced 2025-06-12 05:31:41 +00:00
update
This commit is contained in:
21
node_modules/bs-recipes/recipes/webpack.react-transform-hmr/.babelrc
generated
vendored
Normal file
21
node_modules/bs-recipes/recipes/webpack.react-transform-hmr/.babelrc
generated
vendored
Normal file
@ -0,0 +1,21 @@
|
||||
// Source:
|
||||
// https://github.com/gaearon/react-transform-hmr/tree/f22f9a938ed295e0c5ebe756d73fdae4c3a6fdef
|
||||
{
|
||||
"presets": ["react", "es2015"],
|
||||
"env": {
|
||||
// only enable it when process.env.NODE_ENV is 'development' or undefined
|
||||
"development": {
|
||||
"plugins": [
|
||||
["react-transform", {
|
||||
"transforms": [{
|
||||
"transform": "react-transform-hmr",
|
||||
// if you use React Native, pass "react-native" instead:
|
||||
"imports": ["react"],
|
||||
// this is important for Webpack HMR:
|
||||
"locals": ["module"]
|
||||
}]
|
||||
}]
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
46
node_modules/bs-recipes/recipes/webpack.react-transform-hmr/app.js
generated
vendored
Normal file
46
node_modules/bs-recipes/recipes/webpack.react-transform-hmr/app.js
generated
vendored
Normal file
@ -0,0 +1,46 @@
|
||||
/**
|
||||
* Require Browsersync along with webpack and middleware for it
|
||||
*/
|
||||
var browserSync = require('browser-sync');
|
||||
var webpack = require('webpack');
|
||||
var webpackDevMiddleware = require('webpack-dev-middleware');
|
||||
var webpackHotMiddleware = require('webpack-hot-middleware');
|
||||
|
||||
/**
|
||||
* Require ./webpack.config.js and make a bundler from it
|
||||
*/
|
||||
var webpackConfig = require('./webpack.config');
|
||||
var bundler = webpack(webpackConfig);
|
||||
|
||||
/**
|
||||
* Run Browsersync and use middleware for Hot Module Replacement
|
||||
*/
|
||||
browserSync({
|
||||
server: {
|
||||
baseDir: 'app',
|
||||
|
||||
middleware: [
|
||||
webpackDevMiddleware(bundler, {
|
||||
// IMPORTANT: dev middleware can't access config, so we should
|
||||
// provide publicPath by ourselves
|
||||
publicPath: webpackConfig.output.publicPath,
|
||||
|
||||
// pretty colored output
|
||||
stats: { colors: true }
|
||||
|
||||
// for other settings see
|
||||
// http://webpack.github.io/docs/webpack-dev-middleware.html
|
||||
}),
|
||||
|
||||
// bundler should be the same as above
|
||||
webpackHotMiddleware(bundler)
|
||||
]
|
||||
},
|
||||
|
||||
// no need to watch '*.js' here, webpack will take care of it for us,
|
||||
// including full page reloads if HMR won't work
|
||||
files: [
|
||||
'app/css/*.css',
|
||||
'app/*.html'
|
||||
]
|
||||
});
|
35
node_modules/bs-recipes/recipes/webpack.react-transform-hmr/app/css/main.css
generated
vendored
Normal file
35
node_modules/bs-recipes/recipes/webpack.react-transform-hmr/app/css/main.css
generated
vendored
Normal file
@ -0,0 +1,35 @@
|
||||
.hello-world {
|
||||
margin: 200px 0;
|
||||
font-size: 70px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hello-world__i {
|
||||
display: inline-block;
|
||||
-webkit-animation: rotate 4000ms infinite linear;
|
||||
animation: rotate 4000ms infinite linear;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes rotate {
|
||||
from {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
16
node_modules/bs-recipes/recipes/webpack.react-transform-hmr/app/index.html
generated
vendored
Normal file
16
node_modules/bs-recipes/recipes/webpack.react-transform-hmr/app/index.html
generated
vendored
Normal file
@ -0,0 +1,16 @@
|
||||
<!doctype html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Browsersync, Webpack + React Hot Loader Example</title>
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Browsersync, Webpack + React Hot Loader Example</h1>
|
||||
|
||||
<div id="react-root"></div>
|
||||
|
||||
<script src="js/bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
14
node_modules/bs-recipes/recipes/webpack.react-transform-hmr/app/js/HelloWorld.jsx
generated
vendored
Normal file
14
node_modules/bs-recipes/recipes/webpack.react-transform-hmr/app/js/HelloWorld.jsx
generated
vendored
Normal file
@ -0,0 +1,14 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
export default class HelloWorld extends Component {
|
||||
render() {
|
||||
// Play with it...
|
||||
const name = 'World';
|
||||
|
||||
return (
|
||||
<h2 className="hello-world">
|
||||
<span className="hello-world__i">Hello, {name}</span>
|
||||
</h2>
|
||||
);
|
||||
}
|
||||
}
|
7
node_modules/bs-recipes/recipes/webpack.react-transform-hmr/app/js/main.js
generated
vendored
Normal file
7
node_modules/bs-recipes/recipes/webpack.react-transform-hmr/app/js/main.js
generated
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
import React from 'react';
|
||||
import { render } from 'react-dom';
|
||||
// It's important to not define HelloWorld component right in this file
|
||||
// because in that case it will do full page reload on change
|
||||
import HelloWorld from './HelloWorld.jsx';
|
||||
|
||||
render(<HelloWorld />, document.getElementById('react-root'));
|
1
node_modules/bs-recipes/recipes/webpack.react-transform-hmr/desc.md
generated
vendored
Normal file
1
node_modules/bs-recipes/recipes/webpack.react-transform-hmr/desc.md
generated
vendored
Normal file
@ -0,0 +1 @@
|
||||
To see `react-transform-hmr` in action, edit `js/HelloWorld.jsx`
|
25
node_modules/bs-recipes/recipes/webpack.react-transform-hmr/package.json
generated
vendored
Normal file
25
node_modules/bs-recipes/recipes/webpack.react-transform-hmr/package.json
generated
vendored
Normal file
@ -0,0 +1,25 @@
|
||||
{
|
||||
"name": "webpack.react-transform-hmr",
|
||||
"version": "1.0.0",
|
||||
"description": "Webpack + React Transform HMR",
|
||||
"main": "app.js",
|
||||
"author": "Sergey Slipchenko <faergeek@gmail.com>",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"start": "node ."
|
||||
},
|
||||
"dependencies": {
|
||||
"babel-core": "^6.21.0",
|
||||
"babel-loader": "^6.2.10",
|
||||
"babel-plugin-react-transform": "^2.0.2",
|
||||
"babel-preset-es2015": "^6.9.0",
|
||||
"babel-preset-react": "^6.16.0",
|
||||
"browser-sync": "^2.8.0",
|
||||
"react": "^15.4.1",
|
||||
"react-dom": "^15.4.1",
|
||||
"react-transform-hmr": "^1.0.0",
|
||||
"webpack": "^1.10.5",
|
||||
"webpack-dev-middleware": "^1.2.0",
|
||||
"webpack-hot-middleware": "^2.13.2"
|
||||
}
|
||||
}
|
82
node_modules/bs-recipes/recipes/webpack.react-transform-hmr/readme.md
generated
vendored
Normal file
82
node_modules/bs-recipes/recipes/webpack.react-transform-hmr/readme.md
generated
vendored
Normal file
@ -0,0 +1,82 @@
|
||||
#Browsersync - Webpack + React Transform HMR
|
||||
|
||||
## Installation/Usage:
|
||||
|
||||
To try this example, follow these 4 simple steps.
|
||||
|
||||
**Step 1**: Clone this entire repo
|
||||
```bash
|
||||
$ git clone https://github.com/Browsersync/recipes.git bs-recipes
|
||||
```
|
||||
|
||||
**Step 2**: Move into the directory containing this example
|
||||
```bash
|
||||
$ cd bs-recipes/recipes/webpack.react-transform-hmr
|
||||
```
|
||||
|
||||
**Step 3**: Install dependencies
|
||||
```bash
|
||||
$ npm install
|
||||
```
|
||||
|
||||
**Step 4**: Run the example
|
||||
```bash
|
||||
$ npm start
|
||||
```
|
||||
|
||||
### Additional Info:
|
||||
|
||||
To see `react-transform-hmr` in action, edit `js/HelloWorld.jsx`
|
||||
|
||||
|
||||
### Preview of `app.js`:
|
||||
```js
|
||||
/**
|
||||
* Require Browsersync along with webpack and middleware for it
|
||||
*/
|
||||
var browserSync = require('browser-sync');
|
||||
var webpack = require('webpack');
|
||||
var webpackDevMiddleware = require('webpack-dev-middleware');
|
||||
var webpackHotMiddleware = require('webpack-hot-middleware');
|
||||
|
||||
/**
|
||||
* Require ./webpack.config.js and make a bundler from it
|
||||
*/
|
||||
var webpackConfig = require('./webpack.config');
|
||||
var bundler = webpack(webpackConfig);
|
||||
|
||||
/**
|
||||
* Run Browsersync and use middleware for Hot Module Replacement
|
||||
*/
|
||||
browserSync({
|
||||
server: {
|
||||
baseDir: 'app',
|
||||
|
||||
middleware: [
|
||||
webpackDevMiddleware(bundler, {
|
||||
// IMPORTANT: dev middleware can't access config, so we should
|
||||
// provide publicPath by ourselves
|
||||
publicPath: webpackConfig.output.publicPath,
|
||||
|
||||
// pretty colored output
|
||||
stats: { colors: true }
|
||||
|
||||
// for other settings see
|
||||
// http://webpack.github.io/docs/webpack-dev-middleware.html
|
||||
}),
|
||||
|
||||
// bundler should be the same as above
|
||||
webpackHotMiddleware(bundler)
|
||||
]
|
||||
},
|
||||
|
||||
// no need to watch '*.js' here, webpack will take care of it for us,
|
||||
// including full page reloads if HMR won't work
|
||||
files: [
|
||||
'app/css/*.css',
|
||||
'app/*.html'
|
||||
]
|
||||
});
|
||||
|
||||
```
|
||||
|
34
node_modules/bs-recipes/recipes/webpack.react-transform-hmr/webpack.config.js
generated
vendored
Normal file
34
node_modules/bs-recipes/recipes/webpack.react-transform-hmr/webpack.config.js
generated
vendored
Normal file
@ -0,0 +1,34 @@
|
||||
// For instructions about this file refer to
|
||||
// webpack and webpack-hot-middleware documentation
|
||||
var webpack = require('webpack');
|
||||
var path = require('path');
|
||||
|
||||
module.exports = {
|
||||
debug: true,
|
||||
devtool: '#eval-source-map',
|
||||
context: path.join(__dirname, 'app', 'js'),
|
||||
|
||||
entry: [
|
||||
'webpack/hot/dev-server',
|
||||
'webpack-hot-middleware/client',
|
||||
'./main'
|
||||
],
|
||||
|
||||
output: {
|
||||
path: path.join(__dirname, 'app', 'js'),
|
||||
publicPath: '/js/',
|
||||
filename: 'bundle.js'
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new webpack.optimize.OccurenceOrderPlugin(),
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
new webpack.NoErrorsPlugin()
|
||||
],
|
||||
|
||||
module: {
|
||||
loaders: [
|
||||
{ test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel'] }
|
||||
]
|
||||
}
|
||||
};
|
Reference in New Issue
Block a user