11484 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Problème de build avec Parcel

Bonjour!

Je suis en train de faire un site vitrine simple sous WordPress, et l'intégration est faite en SCSS et un tout petit peu de JS.

Mon soucis c'est que quand je fais un build de main.js:


import './js/imageZoom.js';
import './scss/main.scss'


J'ai cette erreur: 

@parcel/core: Failed to resolve '\\~/fonts/Tangerine-Bold.ttf' from './wp-content/themes/atelierdupoint/assets/scss/main.scss'

@parcel/resolver-default: Cannot load file '../../../../../fonts/Tangerine-Bold.ttf' in './wp-content/themes/atelierdupoint/assets/scss'.


Alors j'ai essayé d'enlever la "~" et ça fonctionne plus ou moins mais bon, ça reste pas fou, c'est clairement pas le but de s'embêter à tout changer, Parcel est sensé le faire non?

Et outre ce problème de chemin, Parcel ne rend pas la totalité de mon SCSS, j'ai l'impression qu'il ne lit pas certaines variables...

Ah oui et tant que j'y suis, impossible de le désinstaller (Parcel)...

Je suis sous Ubuntu 20.X et j'ai Parcel 2.0.0-beta.2, et un "sudo npm uninstall -g parcel@next" n'y fais rien... Si vous aviez une idée pour ça aussi ça serait sympa!

Merci d'avance pour votre temps!
Modifié par Stoneteckel (17 Mar 2021 - 08:28)
Modérateur
Salut,
Je connais mal ce task runner.
Normalement avec Parcel, tu fais ton lien de ton scss dans le html et non dans le js.

As tu essayé de faire un path.resolve ? (import path ..... path.resolve('.') .... etc. )

ps : n'oublie pas de supprimer ton .cache si tu fais des changements de config.
Modifié par niuxe (17 Mar 2021 - 09:30)
Merci de me répondre!

Je vois pas trop comment faire ce path.resolve, je suis plutôt un gros faisan en matière de JS...

Tu te sers de quoi comme task runner du coup?

Je suis en train de regarder Grunt, qui a l'air d'être pas mal utilisé, ça m'a pas l'air très compliqué à faire tourner.
Je pense me pencher dessus, ce qui renvoi à la dernière question de mon post, pas moyen de désinstaller Parcel, je comprends pas pourquoi...

Par contre la prochaine fois que j'installe quoi que ce soit, je le fais localement, je me ferais plus avoir haha
Modifié par Stoneteckel (17 Mar 2021 - 09:35)
Bon alors j'ai réglé le problème du "~"...
J'ai supprimé les dossiers .cache, dist, node_modules, supprimé les package.json et lock.
Et plutôt que de lancer le build à la racine avec un "cd" pour viser mon "main.js", j'ai lancé le build depuis le dossier de ce même fichier.

Ça fonctionne mais j'ai toujours pas l'intégralité de mon SCSS rendu. Peut-être un problème de priorité dans l'import?

Et du coup mon "imageZoom.js" n'est plus pris en compte...

J'essaye.
Modifié par Stoneteckel (17 Mar 2021 - 09:45)
Modérateur
Stoneteckel a écrit :

Je vois pas trop comment faire ce path.resolve, je suis plutôt un gros faisan en matière de JS...

pas sûr que ça fonctionne en y réfléchissant 

let path = require('path');
let here = path.resolve('.');

import here + '/scss/main.scss';


mais comme je t'ai dit, parcel permet de faire un minimum de configuration. Normalement, c'est plutôt ceci que tu devrais faire :
Dans ton html : 

<link rel="stylesheet" href="chemin/vers/fichier.scss">



Stoneteckel a écrit :

Tu te sers de quoi comme task runner du coup?


Pendant très longtemps, j'ai utilisé Grunt. Si tu veux, je te file ma config. Je connais assez bien Gulp. J'ai un peu utilisé Webpack (mais je n'aime pas. Une vraie usine à gaz). Depuis quelques temps, j'utilise RollupJS que je trouve vraiment bien.


Stoneteckel a écrit :

Je suis en train de regarder Grunt, qui a l'air d'être pas mal utilisé, ça m'a pas l'air très compliqué à faire tourner.
Je pense me pencher dessus, ce qui renvoi à la dernière question de mon post, pas moyen de désinstaller Parcel, je comprends pas pourquoi...

Grunt est bien. C'est l'équivalent de GulpJS (quoi qu'on en dise).
Vu que qu'Ubuntu shoot volontairement certaines règles de sécurités basiques.... ça devrait être un truc comme 

$npm uninstall -g parcel-quelquechose

Sinon, s'il ne veut pas : 

$sudo npm uninstall -g parcel-quelquechose



Stoneteckel a écrit :

Par contre la prochaine fois que j'installe quoi que ce soit, je le fais localement, je me ferais plus avoir haha 



$npm i -D le-binaire


par la suite, pour lancer ce binaire : 

$npx le-binaire

Modifié par niuxe (17 Mar 2021 - 11:05)
Merci beaucoup!

Alors du coup j'ai trouvé ce qui n'allait pas.
Comme souvent, un truc stupide...

Mes propriétés SCSS qui ne fonctionnent pas, c'est simplement parce que je ne les ai pas définies...

En gros, j'ai fais mon intégration que j'ai ensuite importé dans WP, sauf qu'en route j'ai perdu mon "reset-css", ce qui fait que le comportement par défaut du navigateur est revenu, et donc je dois récupérer ce fichier...

Parcel fonctionne très bien, on va dire que je suis juste pas réveillé Smiley sweatdrop

Du coup je fini mon projet comme ça et je regarderais Grunt de plus près pour le suivant!

J'ai déjà essayé la commande avec 
sudo npm uninstall -g parcel@next
mais ça veut pas. Bon du coup j'ai plus besoin de le virer alors ça va haha

Merci encore pour ton aide Niuxe Smiley cligne
Modérateur
ma config grunt.
- les modules sont chargés en fonction du package.json Smiley cligne aparès, il n'y a plus qu'à faire le paramètrage dans grunt au cas où.
- le portage es6 via browserify et babel
- minification des images


var Grunt = function(grunt) {
        require('load-grunt-tasks')(grunt);

        grunt.initConfig({
            watch: {
                js: {
                    files: ['js/**/*.js', 'js/*.js', '!transfert-js/**/*.js'],
                    tasks: ['browserify' ,/*'jshint',*/ 'uglify'],
                    options: {
                        spawn: false,
                    },
                },
                css: {
                    files: ['scss/**/*.scss', 'scss/*.scss', 'scss/**/*.css', 'scss/*.css'],
                    tasks: ['sass'],
                    options: {
                        spawn: false,
                    },
                },
                img: {
                    files: ['img/**/*.png', 'img/**/*.jpg', 'img/*.png', 'img/*.jpg'],
                    tasks: ['image'],
                    options: {
                        spawn: false,
                    },
                },
            },
            image: {
                static: {
                    options: {
                        pngquant: true,
                        optipng: false,
                        zopflipng: true,
                        jpegRecompress: false,
                        mozjpeg: true,
                        guetzli: false,
                        gifsicle: true,
                        svgo: true
                    }//,
                    // files: {
                    //     'dist/img.png': 'src/img.png',
                    //     'dist/img.jpg': 'src/img.jpg',
                    //     'dist/img.gif': 'src/img.gif',
                    //     'dist/img.svg': 'src/img.svg'
                    // }
                },
                dynamic: {
                    files: [{
                        expand: true,
                        cwd: 'img/',
                        src: ['**/*.{png,jpg,gif,svg}'],
                        dest: '../public/img'
                    }]
                }
            },
            browserify: {
                dist: {
                    options: {
                        transform: [
                            ["babelify", {
                                loose: "all"
                            }]
                        ],
                        browserifyOptions: {
                            debug: true
                        }
                    },
                    files: {
                        "js/transfert-js/app-back.js": ["./js/back/index.js"],
                        "js/transfert-js/app-front.js": ["./js/front/index.js"],
                    }
                }
            },
            // jshint: {
            //     options: {
            //         curly: true,
            //         eqeqeq: true,
            //         eqnull: true,
            //         browser: true,
            //         multistr: true,
            //         globals: {
            //             jQuery: true
            //         },
            //     },
            //     all: ['js/app.js']
            // },
            uglify: {
                options: {
                    mangle: false
                },
                my_target: {
                    files: {
                        '../public/js/min.js': ['./js/transfert-js/app-back.js'],
                        '../src/views/tpl/min.js': ['./js/transfert-js/app-front.js'],
                    }
                }
            },

            sass: {
                compile: {
                    options: {
                        check: false,
                        style: 'compressed',
                    },
                    files: {
                        '../public/css/min.css': ['scss/back/index.scss'],
                        '../src/Views/tpl/styles.css': ['scss/front/index.scss'],
                    },
                }
            },
            // cssmin: {
            //     options: {
            //         shorthandCompacting: false,
            //         roundingPrecision: -1
            //     },
            //     target: {
            //         files: {
            //             '../public/css/min.css': ['css/index.css']
            //         }
            //     }
            // }
        });
        grunt.registerTask('default', ['browserify', 'uglify']);
        // grunt.registerTask('css', ['sass']);
        // grunt.registerTask('img', ['image']);
    };
module.exports = Grunt;


package.json


{
  "name": "kit-front",
  "version": "0.0.1",
  "description": "base dev front basique",
  "main": "index.js",
  "scripts": {
    "start": "grunt watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "babelify": "^6.1.0",
    "grunt": "^1.0.1",
    "grunt-browserify": "^3.8.0",
    "grunt-contrib-cssmin": "^1.0.1",
    "grunt-contrib-jshint": "^1.0.0",
    "grunt-contrib-sass": "^1.0.0",
    "grunt-contrib-uglify": "^2.0.0",
    "grunt-contrib-watch": "^1.0.0",
    "grunt-image": "^3.0.0",
    "load-grunt-tasks": "^3.4.0"
  },
  "dependencies": {
  }
}




$npm install -g grunt-cli
$npm i
$npm start
Sujet clos
Aller à