ΠΡΠΈΠ²Π΅Ρ, Ρ ΠΏΠΎΠ»ΡΡΠ°Ρ ΡΡΡ ΠΎΡΠΈΠ±ΠΊΡ Ρ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ ΠΈΠ· Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ:
Π² ΠΎΠ±Π΅ΡΠ°Π½ΠΈΠΈ) TypeError: this.WorkerClass Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΎΡΠΎΠΌ.
ΠΡΠΎ ΠΌΠΎΠΉ ΠΊΠΎΠ΄:
console.log(src);
Vibrant.from(src).getPalette()
.then((palette) => console.log(palette))
Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ React
.
Π― ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ»ΡΡΠ°Ρ ΡΡ ΠΆΠ΅ ΠΎΡΠΈΠ±ΠΊΡ ΠΏΡΠΈ ΠΏΠΎΠΏΡΡΠΊΠ΅ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠΈΠΌΠ΅Ρ Π² React, ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, ΠΏΠΎΠΌΠΎΠ³ΠΈΡΠ΅.
ΠΠ·Π²ΠΈΠ½ΠΈΡΠ΅ Π·Π° ΠΏΡΡΠ°Π½ΠΈΡΡ. ΠΡ Π²ΡΠ΅ Π΅ΡΠ΅ Π΄ΠΎΡΠ°Π±Π°ΡΡΠ²Π°Π΅ΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ.
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π²Π°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ webpack ΠΈ worker-loader.
Π‘ΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ Π½Π°Ρ
ΠΎΠ΄ΡΡΡΡ Π² Π²Π΅ΡΠΊΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ:
https://github.com/akfish/node-vibrant/tree/develop#webpack -configuration
Π― ΡΠ΄Π΅Π»Π°Ρ Π²ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠ΅, ΡΡΠΎΠ±Ρ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ, ΠΊΠ°ΠΊ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΡΠΏΡΡΡΠΈΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ Π²Π΅ΡΡΠΈΡ ΡΡΠΎΠ³ΠΎ, Π½Π΅ ΡΡΠ΅Π±ΡΡΡΡΡ Π²Π΅Π±-ΠΏΠ°ΠΊΠ΅ΡΠ°. Π₯ΡΠΎΠ½ΠΎΠ»ΠΎΠ³ΠΈΡ ΠΊΠΎΠ»Π΅Π±Π»Π΅ΡΡΡ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Ρ ΠΌΠ΅Π½Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΡΠΎ Π·Π΄ΠΎΡΠΎΠ²ΡΠ΅ΠΌ Π² ΡΠ΅ΠΌΡΠ΅, ΠΏΠΎΡΡΠΎΠΌΡ Π½Π°Π±Π΅ΡΠΈΡΠ΅ΡΡ ΡΠ΅ΡΠΏΠ΅Π½ΠΈΡ :)
Π’Π° ΠΆΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°, Π½ΠΎ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ vue.js
Π’Π° ΠΆΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Angular 7 :)
Π’Π° ΠΆΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Ρ Vue.js
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Webpack
@AggressivelyMeows , @MadReal ΡΠ±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ Ρ Π²Π°Ρ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ ΡΠ°Π±ΠΎΡΠΈΠΉ Π·Π°Π³ΡΡΠ·ΡΠΈΠΊ, ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ Π²Π΅Π±-ΠΏΠ°ΠΊΠ΅ΡΠ°. Π ΡΠ»ΡΡΠ°Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Vue Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ vue.config.js .
//vue.config.js
module.exports = {
configureWebpack: {
module: {
rules: [
{
test: /\.worker\.js$/,
use: { loader: "worker-loader" }
}
]
}
},
}
ΠΡΠΈΠ²Π΅Ρ. ΠΠ΅ ΠΌΠΎΠ³Ρ Π½Π°ΠΉΡΠΈ ΡΠΏΠΎΡΠΎΠ± Π·Π°ΡΡΠ°Π²ΠΈΡΡ Π΅Π³ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ. Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ Π·Π°Π³ΡΡΠ·ΡΠΈΠΊ Π² ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ ΠΌΠΎΠ΅Π³ΠΎ Π²Π΅Π±-ΠΏΠ°ΠΊΠ΅ΡΠ°, Π½ΠΎ Π²ΡΠ΅ Π΅ΡΠ΅ Π΅ΡΡΡ ΠΎΡΠΈΠ±ΠΊΠ° ...
@akfish Π΅ΡΡΡ ΠΈΠ΄Π΅ΠΈ?
ΠΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, ΠΈΠ·Π±Π΅Π³Π°ΠΉΡΠ΅ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎΠΉ ΠΌΠ°ΡΠΊΠΈΡΠΎΠ²ΠΊΠΈ ΡΠΎΠΏΡΠΎΠ²ΠΎΠΆΠ΄Π°ΡΡΠΈΡ - FWIW Π― ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ΅ΠΊΡΡΠΈΡ ΡΠΎΠΏΡΠΎΠ²ΠΎΠΆΠ΄Π°ΡΡΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°.
ΠΡΡΡ Π»ΠΈ ΡΠΏΠΎΡΠΎΠ± ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ ΠΌΠ½Π΅ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΠ΅, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠ΅ Ρ ΠΌΠΎΠ³ Π±Ρ Π²Π·Π³Π»ΡΠ½ΡΡΡ? Π― Π½Π΅ ΠΌΠΎΠ³Ρ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅ΡΡΠΈ
Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ npmjs ΠΈΠΌΠ΅Π΅Ρ Π°Π»ΡΡΠ°-Π²Π΅ΡΡΠΈΡ, ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ΅ΠΌΡΡ ΠΊΠ°ΠΊ ΠΏΠΎΡΠ»Π΅Π΄Π½ΡΡ Π²Π΅ΡΡΠΈΡ.
Π ΠΌΠΎΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ (ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Nuxt.js) Ρ ΠΏΠΎΠ½ΠΈΠ·ΠΈΠ» Π²Π΅ΡΡΠΈΡ Ρ Β«3.2.1-alpha.1Β» Π΄ΠΎ Β«3.1.6Β», ΠΈ ΠΎΡΠΈΠ±ΠΊΠ° Π±ΡΠ»Π° ΡΠ΅ΡΠ΅Π½Π°.
@ivgtr ΠΠ°ΡΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ»ΠΈΡΠ½ΠΎ
npm remove node-vibrant && npm install [email protected]
@ivgtr ΡΠ΅ΡΠ΅Π½Π°! ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΠ½ΠΎΡΡΡ!
Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ ΠΊΠΎΠ½ΡΠΈΠ³ ΠΈΠ· Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΈ ΠΏΠΎΠ½ΠΈΠΆΠ΅Π½ Π΄ΠΎ [email protected]
ΠΠ°Π΄Π΅ΡΡΡ, ΡΡΠ° ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Π±ΡΠ΄Π΅Ρ ΡΠ΅ΡΠ΅Π½Π° Π² ΡΠ»Π΅Π΄ΡΡΡΠΈΡ
Π²Π΅ΡΡΠΈΡΡ
node-vibrant
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ React ΠΈ ΠΈΠ·Π²Π»Π΅ΡΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ react-create-app
ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, Π½Π΅ Π΄Π΅Π»Π°ΠΉΡΠ΅ Π²ΡΠΎΠ΄Π΅ https://github.com/storybookjs/storybook/issues , ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Ρ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠ΅ΠΉ Π΄Π΅ΡΡΠΌΠ° webpack Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ "ΠΈΡΡΠΈΠ½Π½Π°Ρ" ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΠΈ.
Π‘Π΄Π΅Π»Π°ΠΉΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΡΠΌ, ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°.
@ivgtr ΠΠ°ΡΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ»ΠΈΡΠ½ΠΎ
npm remove node-vibrant && npm install [email protected]
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ!!!!!
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
@ivgtr ΠΠ°ΡΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ»ΠΈΡΠ½ΠΎ