1
0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-29 23:22:34 +01:00

Merge branch 'webpack-2018'

This commit is contained in:
Dan Brown 2018-03-17 13:05:25 +00:00
commit 2ff2c0b257
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
8 changed files with 7258 additions and 2375 deletions

9443
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,38 +1,37 @@
{ {
"private": true, "private": true,
"scripts": { "scripts": {
"build": "gulp build", "build": "webpack",
"production": "gulp build --production", "production": "NODE_ENV=production webpack && rm -f ./public/dist/*styles.js",
"dev": "gulp", "dev": "npm-run-all --parallel watch livereload",
"watch": "gulp", "watch": "webpack --watch",
"livereload": "livereload ./public/dist/",
"permissions": "chown -R $USER:$USER bootstrap/cache storage public/uploads" "permissions": "chown -R $USER:$USER bootstrap/cache storage public/uploads"
}, },
"devDependencies": { "devDependencies": {
"babelify": "^7.3.0", "@babel/core": "^7.0.0-beta.40",
"babel-polyfill": "^6.23.0", "@babel/preset-env": "^7.0.0-beta.40",
"babel-preset-es2015": "^6.24.1", "babel-loader": "^8.0.0-beta.0",
"browserify": "^14.3.0", "babel-polyfill": "^6.26.0",
"envify": "^4.0.0", "autoprefixer": "^8.1.0",
"gulp": "^3.9.1", "css-loader": "^0.28.10",
"gulp-autoprefixer": "3.1.1", "extract-loader": "^1.0.2",
"gulp-clean-css": "^3.0.4", "file-loader": "^1.1.11",
"gulp-livereload": "^3.8.1", "livereload": "^0.7.0",
"gulp-minify-css": "1.2.4", "node-sass": "^4.7.2",
"gulp-plumber": "1.1.0", "npm-run-all": "^4.1.2",
"gulp-sass": "3.1.0", "postcss-loader": "^2.1.1",
"gulp-sourcemaps": "^2.6.1", "sass-loader": "^6.0.7",
"gulp-uglify": "2.1.2", "style-loader": "^0.20.3",
"gulp-util": "^3.0.8", "uglifyjs-webpack-plugin": "^1.2.3",
"vinyl-buffer": "^1.0.0", "webpack": "^4.1.1",
"vinyl-source-stream": "^1.1.0", "webpack-cli": "^2.0.11"
"watchify": "^3.9.0",
"yargs": "^7.1.0"
}, },
"dependencies": { "dependencies": {
"axios": "^0.16.1", "axios": "^0.18.0",
"clipboard": "^1.7.1", "clipboard": "^2.0.0",
"codemirror": "^5.26.0", "codemirror": "^5.26.0",
"dropzone": "^4.0.1", "dropzone": "^5.4.0",
"markdown-it": "^8.3.1", "markdown-it": "^8.3.1",
"markdown-it-task-lists": "^2.0.0", "markdown-it-task-lists": "^2.0.0",
"moment": "^2.21.0", "moment": "^2.21.0",

View File

@ -21,7 +21,6 @@ let componentMapping = {
window.components = {}; window.components = {};
let componentNames = Object.keys(componentMapping); let componentNames = Object.keys(componentMapping);
initAll();
/** /**
* Initialize components of the given name within the given element. * Initialize components of the given name within the given element.
@ -53,4 +52,6 @@ function initAll(parentElement) {
} }
} }
window.components.init = initAll; window.components.init = initAll;
export default initAll;

View File

@ -1,6 +1,12 @@
"use strict"; import "babel-polyfill"
require("babel-polyfill"); import "./dom-polyfills"
require('./dom-polyfills'); import "./pages/page-show"
import Translations from "./translations"
import vues from "./vues/vues"
import components from "./components"
import Vue from "vue"
import axios from "axios"
// Url retrieval function // Url retrieval function
window.baseUrl = function(path) { window.baseUrl = function(path) {
@ -37,9 +43,6 @@ class EventManager {
window.$events = new EventManager(); window.$events = new EventManager();
const Vue = require("vue");
const axios = require("axios");
let axiosInstance = axios.create({ let axiosInstance = axios.create({
headers: { headers: {
'X-CSRF-TOKEN': document.querySelector('meta[name=token]').getAttribute('content'), 'X-CSRF-TOKEN': document.querySelector('meta[name=token]').getAttribute('content'),
@ -60,14 +63,13 @@ Vue.prototype.$events = window.$events;
// Translation setup // Translation setup
// Creates a global function with name 'trans' to be used in the same way as Laravel's translation system // Creates a global function with name 'trans' to be used in the same way as Laravel's translation system
const Translations = require("./translations");
let translator = new Translations(window.translations); let translator = new Translations(window.translations);
window.trans = translator.get.bind(translator); window.trans = translator.get.bind(translator);
window.trans_choice = translator.getPlural.bind(translator); window.trans_choice = translator.getPlural.bind(translator);
// Load vues and components
require("./vues/vues"); vues();
require("./components"); components();
//Global jQuery Config & Extensions //Global jQuery Config & Extensions
@ -125,6 +127,3 @@ if(navigator.userAgent.indexOf('MSIE')!==-1
|| navigator.userAgent.indexOf('Safari') !== -1){ || navigator.userAgent.indexOf('Safari') !== -1){
document.body.classList.add('flexbox-support'); document.body.classList.add('flexbox-support');
} }
// Page specific items
require("./pages/page-show");

View File

@ -16,10 +16,17 @@ let vueMapping = {
window.vues = {}; window.vues = {};
let ids = Object.keys(vueMapping); function load() {
for (let i = 0, len = ids.length; i < len; i++) { let ids = Object.keys(vueMapping);
if (!exists(ids[i])) continue; for (let i = 0, len = ids.length; i < len; i++) {
let config = vueMapping[ids[i]]; if (!exists(ids[i])) continue;
config.el = '#' + ids[i]; let config = vueMapping[ids[i]];
window.vues[ids[i]] = new Vue(config); config.el = '#' + ids[i];
} window.vues[ids[i]] = new Vue(config);
}
}
export default load;

View File

@ -10,8 +10,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<!-- Styles and Fonts --> <!-- Styles and Fonts -->
<link rel="stylesheet" href="{{ versioned_asset('css/styles.css') }}"> <link rel="stylesheet" href="{{ versioned_asset('dist/styles.css') }}">
<link rel="stylesheet" media="print" href="{{ versioned_asset('css/print-styles.css') }}"> <link rel="stylesheet" media="print" href="{{ versioned_asset('dist/print-styles.css') }}">
<!-- Scripts --> <!-- Scripts -->
<script src="{{ baseUrl('/libs/jquery/jquery.min.js?version=2.1.4') }}"></script> <script src="{{ baseUrl('/libs/jquery/jquery.min.js?version=2.1.4') }}"></script>
@ -82,7 +82,7 @@
</div> </div>
</div> </div>
@yield('bottom') @yield('bottom')
<script src="{{ versioned_asset('js/common.js') }}"></script> <script src="{{ versioned_asset('dist/app.js') }}"></script>
@yield('scripts') @yield('scripts')
</body> </body>
</html> </html>

View File

@ -10,8 +10,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<!-- Styles and Fonts --> <!-- Styles and Fonts -->
<link rel="stylesheet" href="{{ versioned_asset('css/styles.css') }}"> <link rel="stylesheet" href="{{ versioned_asset('dist/styles.css') }}">
<link rel="stylesheet" media="print" href="{{ versioned_asset('css/print-styles.css') }}"> <link rel="stylesheet" media="print" href="{{ versioned_asset('dist/print-styles.css') }}">
<!-- Scripts --> <!-- Scripts -->
<script src="{{ baseUrl("/libs/jquery/jquery.min.js?version=2.1.4") }}"></script> <script src="{{ baseUrl("/libs/jquery/jquery.min.js?version=2.1.4") }}"></script>
@ -58,6 +58,6 @@
@yield('content') @yield('content')
</section> </section>
<script src="{{ versioned_asset('js/common.js') }}"></script> <script src="{{ versioned_asset('dist/app.js') }}"></script>
</body> </body>
</html> </html>

76
webpack.config.js Normal file
View File

@ -0,0 +1,76 @@
const path = require('path');
const dev = process.env.NODE_ENV !== 'production';
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const config = {
mode: dev? 'development' : 'production',
entry: {
app: './resources/assets/js/index.js',
styles: './resources/assets/sass/styles.scss',
"export-styles": './resources/assets/sass/export-styles.scss',
"print-styles": './resources/assets/sass/print-styles.scss',
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'public/dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.scss$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].css',
context: './src/css/',
outputPath: './',
publicPath: 'public/'
}
}, {
loader: 'extract-loader', options: {
publicPath: '',
}
}, {
loader: "css-loader", options: {
sourceMap: dev
}
}, {
loader: 'postcss-loader',
options: {
ident: 'postcss',
sourceMap: dev,
plugins: (loader) => [
require('autoprefixer')(),
]
}
}, {
loader: "sass-loader", options: {
sourceMap: dev
}
}]
}
]
},
plugins: []
};
if (dev) {
config['devtool'] = 'inline-source-map';
}
if (!dev) {
config.plugins.push(new UglifyJsPlugin());
}
module.exports = config;