This commit is contained in:
tatianamac
2019-11-26 14:50:43 -08:00
parent 8a55660ed0
commit 6d5445ecc5
13894 changed files with 2233957 additions and 0 deletions

View File

@ -0,0 +1 @@
node_modules

48
node_modules/bs-recipes/recipes/webpack.babel/app.js generated vendored Normal file
View File

@ -0,0 +1,48 @@
/**
* Require Browsersync along with webpack and middleware for it
*/
var browserSync = require('browser-sync').create();
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var stripAnsi = require('strip-ansi');
/**
* Require ./webpack.config.js and make a bundler from it
*/
var webpackConfig = require('./webpack.config');
var bundler = webpack(webpackConfig);
/**
* Reload all devices when bundle is complete
* or send a fullscreen error message to the browser instead
*/
bundler.plugin('done', function (stats) {
if (stats.hasErrors() || stats.hasWarnings()) {
return browserSync.sockets.emit('fullscreen:message', {
title: "Webpack Error:",
body: stripAnsi(stats.toString()),
timeout: 100000
});
}
browserSync.reload();
});
/**
* Run Browsersync and use middleware for Hot Module Replacement
*/
browserSync.init({
server: 'app',
open: false,
logFileChanges: false,
middleware: [
webpackDevMiddleware(bundler, {
publicPath: webpackConfig.output.publicPath,
stats: {colors: true}
})
],
plugins: ['bs-fullscreen-message'],
files: [
'app/css/*.css',
'app/*.html'
]
});

View File

@ -0,0 +1,17 @@
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Browsersync, Webpack + Babel</title>
</head>
<body>
<h1>Browsersync, Webpack + Babel Example</h1>
<span id="number">0</span>
<button id="inc" type="button">Increase</button>
<button id="dec" type="button">Decrease</button>
<script src="dist/bundle.js"></script>
</body>
</html>

View File

@ -0,0 +1 @@
Edit any files within the `src` folder

View File

@ -0,0 +1,24 @@
{
"name": "webpack.babel",
"version": "1.0.0",
"description": "Webpack + Babel",
"main": "app.js",
"author": "Shane Osbourne",
"license": "MIT",
"scripts": {
"start": "node app"
},
"dependencies": {},
"devDependencies": {
"babel-core": "^6.1.2",
"babel-loader": "^6.1.0",
"babel-plugin-transform-runtime": "^6.1.2",
"babel-preset-es2015": "^6.1.2",
"babel-preset-stage-0": "^6.1.2",
"browser-sync": "^2.8.0",
"bs-fullscreen-message": "^1.0.0",
"strip-ansi": "^3.0.0",
"webpack": "^1.10.5",
"webpack-dev-middleware": "^1.2.0"
}
}

View File

@ -0,0 +1,84 @@
#Browsersync - Webpack + Babel
## 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.babel
```
**Step 3**: Install dependencies
```bash
$ npm install
```
**Step 4**: Run the example
```bash
$ npm start
```
### Additional Info:
Edit any files within the `src` folder
### Preview of `app.js`:
```js
/**
* Require Browsersync along with webpack and middleware for it
*/
var browserSync = require('browser-sync').create();
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var stripAnsi = require('strip-ansi');
/**
* Require ./webpack.config.js and make a bundler from it
*/
var webpackConfig = require('./webpack.config');
var bundler = webpack(webpackConfig);
/**
* Reload all devices when bundle is complete
* or send a fullscreen error message to the browser instead
*/
bundler.plugin('done', function (stats) {
if (stats.hasErrors() || stats.hasWarnings()) {
return browserSync.sockets.emit('fullscreen:message', {
title: "Webpack Error:",
body: stripAnsi(stats.toString()),
timeout: 100000
});
}
browserSync.reload();
});
/**
* Run Browsersync and use middleware for Hot Module Replacement
*/
browserSync.init({
server: 'app',
open: false,
logFileChanges: false,
middleware: [
webpackDevMiddleware(bundler, {
publicPath: webpackConfig.output.publicPath,
stats: {colors: true}
})
],
plugins: ['bs-fullscreen-message'],
files: [
'app/css/*.css',
'app/*.html'
]
});
```

View File

@ -0,0 +1,7 @@
export function inc (value) {
return value + 10;
}
export function dec (value) {
return value - 10;
}

View File

@ -0,0 +1,15 @@
import {inc, dec} from './actions';
window.onload = function() {
let number = document.getElementById('number');
let incBtn = document.getElementById('inc');
let decBtn = document.getElementById('dec');
incBtn.addEventListener('click', function() {
number.innerHTML = inc(+number.innerHTML);
}, false);
decBtn.addEventListener('click', function() {
number.innerHTML = dec(+number.innerHTML);
}, false);
};

View File

@ -0,0 +1,43 @@
// 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',
entry: [
'./src/main'
],
output: {
path: path.join(__dirname, 'app'),
publicPath: '/',
filename: 'dist/bundle.js'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [
{
loader: "babel-loader",
// Only run `.js` and `.jsx` files through Babel
test: /\.jsx?$/,
exclude: /node_modules/,
// Options to configure babel with
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'stage-0'],
}
},
]
}
};