mirrors/wallabag
1
0
Fork 0
mirror of https://github.com/wallabag/wallabag.git synced 2025-02-12 08:45:13 +00:00
Code Issues Projects Releases Wiki Activity

Use Webpack Encore

Browse source
This commit is contained in:
Yassine Guedidi 2023-08-10 01:10:54 +01:00
parent 04e757dcc8
commit f261247766
18 changed files with 1271 additions and 256 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
.babelrc
View file

@ -1,10 +0,0 @@
{
"presets": [
[
"@babel/preset-env",
{
"modules": false
}
]
]
}

3
.eslintrc.json
View file

@ -1,6 +1,9 @@
{
"extends": "airbnb-base",
"parser": "@babel/eslint-parser",
"parserOptions": {
"requireConfigFile": false
},
"env": {
"browser": true,
"es6": true

36
.github/workflows/continuous-integration.yml vendored
View file

@ -57,6 +57,12 @@ jobs:
extensions: json, pdo, pdo_mysql, pdo_sqlite, pdo_pgsql, curl, imagick, pgsql, gd, tidy
ini-values: "date.timezone=Europe/Paris"
- name: "Install Node"
uses: actions/setup-node@v4
with:
node-version-file: ".nvmrc"
cache: 'yarn'
- name: "Setup MySQL"
if: "${{ matrix.database == 'mysql' }}"
run: |
@ -76,6 +82,12 @@ jobs:
with:
composer-options: "--optimize-autoloader --prefer-dist"
- name: "Install dependencies with Yarn"
run: yarn install
- name: "Build assets with Yarn"
run: yarn build:dev
- name: "Prepare database configuration"
run: cp app/config/tests/parameters_test.${{ matrix.database }}.yml app/config/parameters_test.yml
@ -120,6 +132,12 @@ jobs:
extensions: json, pdo, pdo_mysql, pdo_sqlite, pdo_pgsql, curl, imagick, pgsql, gd, tidy
ini-values: "date.timezone=Europe/Paris"
- name: "Install Node"
uses: actions/setup-node@v4
with:
node-version-file: ".nvmrc"
cache: 'yarn'
- name: "Remove database prefix"
run: |
pip install --user yq
@ -144,6 +162,12 @@ jobs:
with:
composer-options: "--optimize-autoloader --prefer-dist"
- name: "Install dependencies with Yarn"
run: yarn install
- name: "Build assets with Yarn"
run: yarn build:dev
- name: "Prepare database configuration"
run: cp app/config/tests/parameters_test.${{ matrix.database }}.yml app/config/parameters_test.yml
@ -179,6 +203,12 @@ jobs:
extensions: json, pdo, pdo_mysql, pdo_sqlite, pdo_pgsql, curl, imagick, pgsql, gd, tidy
ini-values: "date.timezone=Europe/Paris"
- name: "Install Node"
uses: actions/setup-node@v4
with:
node-version-file: ".nvmrc"
cache: 'yarn'
- name: "Setup MySQL"
if: "${{ matrix.database == 'mysql' }}"
run: |
@ -198,6 +228,12 @@ jobs:
with:
composer-options: "--optimize-autoloader --prefer-dist"
- name: "Install dependencies with Yarn"
run: yarn install
- name: "Build assets with Yarn"
run: yarn build:dev
- name: "Prepare database configuration"
run: cp app/config/tests/parameters_test.${{ matrix.database }}.yml app/config/parameters_test.yml

2
.gitignore vendored
View file

@ -60,3 +60,5 @@ specialexport.json
web/custom.css
.env.local
yarn-error.log

1
app/AppKernel.php
View file

@ -35,6 +35,7 @@ class AppKernel extends Kernel
new Http\HttplugBundle\HttplugBundle(),
new Sentry\SentryBundle\SentryBundle(),
new Twig\Extra\TwigExtraBundle\TwigExtraBundle(),
new Symfony\WebpackEncoreBundle\WebpackEncoreBundle(),
];
if (in_array($this->getEnvironment(), ['dev', 'test'], true)) {

8
app/config/config.yml
View file

@ -33,7 +33,8 @@ framework:
cookie_secure: auto
fragments: ~
http_method_override: true
assets: ~
assets:
json_manifest_path: '%kernel.project_dir%/web/build/manifest.json'
mailer:
dsn: "%mailer_dsn%"
http_client:
@ -469,3 +470,8 @@ craue_config:
when@dev:
maker:
root_namespace: 'Wallabag'
webpack_encore:
output_path: '%kernel.project_dir%/web/build'
script_attributes:
defer: true

4
app/config/config_prod.yml
View file

@ -1,10 +1,6 @@
imports:
- { resource: config.yml }
framework:
assets:
# json_manifest_path: '%kernel.project_dir%/web/bundles/wallabagcore/manifest.json'
#doctrine:
# orm:
# metadata_cache_driver: apc

37
app/config/webpack/common.js
View file

@ -1,37 +0,0 @@
const path = require('path');
const webpack = require('webpack');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const projectDir = path.resolve(__dirname, '../../../');
module.exports = {
entry: {
main: path.join(projectDir, './assets/index.js'),
public: path.join(projectDir, './assets/share.js'),
},
output: {
filename: '[name].js',
path: path.resolve(projectDir, 'web/build'),
publicPath: '',
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.$': 'jquery',
'window.jQuery': 'jquery',
}),
new StyleLintPlugin({
configFile: 'stylelint.config.js',
failOnError: false,
quiet: false,
context: 'assets',
files: '**/*.scss',
}),
],
resolve: {
alias: {
jquery: path.join(projectDir, 'node_modules/jquery/dist/jquery.js'),
},
},
};

58
app/config/webpack/dev.js
View file

@ -1,58 +0,0 @@
const { merge } = require('webpack-merge');
const ESLintPlugin = require('eslint-webpack-plugin');
const commonConfig = require('./common');
module.exports = merge(commonConfig, {
devtool: 'eval-source-map',
output: {
filename: '[name].dev.js',
},
mode: 'development',
devServer: {
static: {
directory: './web',
},
},
plugins: [
new ESLintPlugin(),
],
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
{
test: /\.(s)?css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
},
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: ['autoprefixer'],
},
},
},
'sass-loader',
],
},
{
test: /\.(jpg|png|gif|svg|ico|eot|ttf|woff|woff2)$/,
type: 'asset/inline',
},
],
},
});

98
app/config/webpack/prod.js
View file

@ -1,98 +0,0 @@
const webpack = require('webpack');
const { merge } = require('webpack-merge');
const ESLintPlugin = require('eslint-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const commonConfig = require('./common');
module.exports = merge(commonConfig, {
output: {
filename: '[name].js',
},
mode: 'production',
devtool: 'source-map',
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
parallel: true,
terserOptions: {
output: {
comments: false,
},
},
extractComments: false,
}),
],
},
plugins: [
new ESLintPlugin(),
new MiniCssExtractPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
},
}),
new WebpackManifestPlugin({
fileName: 'manifest.json',
sort: (file1, file2) => file1.path.localeCompare(file2.path),
}),
],
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 1,
},
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: ['autoprefixer'],
},
},
},
'sass-loader',
],
},
{
test: /\.(jpg|png|gif|svg|ico)$/,
include: /node_modules/,
type: 'asset/resource',
generator: {
filename: 'img/[name][ext]',
},
},
{
test: /\.(jpg|png|gif|svg|ico)$/,
exclude: /node_modules/,
type: 'asset/resource',
},
{
test: /\.(eot|ttf|woff|woff2)$/,
type: 'asset/resource',
generator: {
filename: 'fonts/[name][ext]',
},
},
],
},
});

1
composer.json
View file

@ -155,6 +155,7 @@
"symfony/translation-contracts": "^2.5.2",
"symfony/twig-bundle": "^5.4.35",
"symfony/validator": "^5.4.35",
"symfony/webpack-encore-bundle": "^1.17",
"tecnickcom/tcpdf": "^6.6.5",
"twig/extra-bundle": "^3.8",
"twig/string-extra": "^3.8",

79
composer.lock generated
View file

@ -4,7 +4,7 @@
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
"This file is @generated automatically"
],
"content-hash": "3bac9c31e4562c97d8ac8047c464ebbd",
"content-hash": "1f0877b1f0f7fc3b074786b51d772cb6",
"packages": [
{
"name": "babdev/pagerfanta-bundle",
@ -14377,6 +14377,79 @@
],
"time": "2024-09-25T14:11:13+00:00"
},
{
"name": "symfony/webpack-encore-bundle",
"version": "v1.17.2",
"source": {
"type": "git",
"url": "https://github.com/symfony/webpack-encore-bundle.git",
"reference": "471ebbc03072dad6e31840dc317bc634a32785f5"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/symfony/webpack-encore-bundle/zipball/471ebbc03072dad6e31840dc317bc634a32785f5",
"reference": "471ebbc03072dad6e31840dc317bc634a32785f5",
"shasum": ""
},
"require": {
"php": ">=7.1.3",
"symfony/asset": "^4.4 || ^5.0 || ^6.0",
"symfony/config": "^4.4 || ^5.0 || ^6.0",
"symfony/dependency-injection": "^4.4 || ^5.0 || ^6.0",
"symfony/deprecation-contracts": "^2.1 || ^3.0",
"symfony/http-kernel": "^4.4 || ^5.0 || ^6.0",
"symfony/polyfill-php80": "^1.25.0",
"symfony/service-contracts": "^1.0 || ^2.0 || ^3.0"
},
"require-dev": {
"symfony/framework-bundle": "^4.4 || ^5.0 || ^6.0",
"symfony/phpunit-bridge": "^5.3 || ^6.0",
"symfony/twig-bundle": "^4.4 || ^5.0 || ^6.0",
"symfony/web-link": "^4.4 || ^5.0 || ^6.0"
},
"type": "symfony-bundle",
"extra": {
"thanks": {
"url": "https://github.com/symfony/webpack-encore",
"name": "symfony/webpack-encore"
}
},
"autoload": {
"psr-4": {
"Symfony\\WebpackEncoreBundle\\": "src"
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Symfony Community",
"homepage": "https://symfony.com/contributors"
}
],
"description": "Integration with your Symfony app & Webpack Encore!",
"support": {
"issues": "https://github.com/symfony/webpack-encore-bundle/issues",
"source": "https://github.com/symfony/webpack-encore-bundle/tree/v1.17.2"
},
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2023-09-26T14:36:28+00:00"
},
{
"name": "symfony/yaml",
"version": "v5.4.45",
@ -20334,9 +20407,9 @@
"ext-tokenizer": "*",
"ext-xml": "*"
},
"platform-dev": [],
"platform-dev": {},
"platform-overrides": {
"php": "7.4.29"
},
"plugin-api-version": "2.3.0"
"plugin-api-version": "2.6.0"
}

13
package.json
View file

@ -44,8 +44,10 @@
"@babel/core": "^7.26.7",
"@babel/eslint-parser": "^7.26.5",
"@babel/preset-env": "^7.26.7",
"@symfony/webpack-encore": "^4.7.0",
"autoprefixer": "^10.4.20",
"babel-loader": "^9.2.1",
"core-js": "^3.23.0",
"css-loader": "^7.1.2",
"eslint": "^8.57.1",
"eslint-config-airbnb-base": "^15.0.0",
@ -57,6 +59,7 @@
"postcss": "^8.5.1",
"postcss-loader": "^8.1.1",
"postcss-scss": "^4.0.9",
"regenerator-runtime": "^0.13.9",
"sass-embedded": "^1.83.4",
"sass-loader": "^16.0.4",
"style-loader": "^4.0.0",
@ -71,7 +74,8 @@
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.2.0",
"webpack-manifest-plugin": "^5.0.0",
"webpack-merge": "^6.0.1"
"webpack-merge": "^6.0.1",
"webpack-notifier": "^1.15.0"
},
"dependencies": {
"@fontsource/atkinson-hyperlegible": "^5.1.1",
@ -95,8 +99,9 @@
"waypoints": "^4.0.1"
},
"scripts": {
"watch": "webpack-dev-server --env=dev",
"build:dev": "webpack --env=dev",
"build:prod": "webpack --env=prod"
"dev-server": "encore dev-server",
"build:dev": "encore dev",
"watch": "encore dev --watch",
"build:prod": "encore production --progress"
}
}

5
postcss.config.js Normal file
View file

@ -0,0 +1,5 @@
module.exports = {
plugins: {
autoprefixer: {},
},
};

6
templates/Entry/share.html.twig
View file

@ -17,12 +17,8 @@
<meta name="twitter:site" content="@wallabagapp" />
<meta name="twitter:title" content="{{ entry.title|e|raw }}" />
<meta name="twitter:description" content="{{ entry.content|striptags|slice(0, 300)|raw }}&hellip;" />
{% if app.debug %}
<script src="{{ asset('build/public.dev.js') }}"></script>
{% else %}
<link rel="stylesheet" href="{{ asset('build/public.css') }}">
{% endif %}
{{ encore_entry_link_tags('public') }}
</head>
<body>
<header class="block">

8
templates/layout.html.twig
View file

@ -2,14 +2,14 @@
{% block css %}
{{ parent() }}
{% if not app.debug %}
<link rel="stylesheet" href="{{ asset('build/main.css') }}">
{% endif %}
{{ encore_entry_link_tags('main') }}
{% endblock %}
{% block scripts %}
{{ parent() }}
<script src="{{ asset('build/main' ~ (app.debug ? '.dev' : '') ~ '.js') }}"></script>
{{ encore_entry_script_tags('main') }}
{% endblock %}
{% block header %}

38
webpack.config.js
View file

@ -1,8 +1,36 @@
const path = require('path');
const Encore = require('@symfony/webpack-encore');
const StyleLintPlugin = require('stylelint-webpack-plugin');
function buildConfig(options) {
const env = options.prod ? 'prod' : 'dev';
return require(path.resolve(__dirname, `app/config/webpack/${env}.js`));
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
module.exports = buildConfig;
Encore
.setOutputPath('web/build/')
.setPublicPath('/build')
.addEntry('main', './assets/index.js')
.addEntry('public', './assets/share.js')
.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.configureBabelPresetEnv((config) => {
config.modules = false;
config.useBuiltIns = 'usage';
config.corejs = '3.23';
})
.enableSassLoader()
.enablePostCssLoader()
.autoProvidejQuery()
.enableEslintPlugin()
.addPlugin(new StyleLintPlugin({
configFile: 'stylelint.config.js',
failOnError: false,
quiet: false,
context: 'assets',
files: '**/*.scss',
}));
module.exports = Encore.getWebpackConfig();

1120
yarn.lock
View file

File diff suppressed because it is too large Load diff