Π― ΠΏΡΡΠ°ΡΡΡ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΡ React-Ace Π΄ΠΎ Π²Π΅ΡΡΠΈΠΈ 8, Π½ΠΎ Π½Π΅ ΠΌΠΎΠ³Ρ Π·Π°ΡΡΠ°Π²ΠΈΡΡ Π²ΠΎΡΠΊΠ΅ΡΠ° ΡΠ°Π±ΠΎΡΠ°ΡΡ.
/node_modules/ace-builds/src-min-noconflict/worker-css.js:1:2821: Cannot resolve dependency 'ace/lib/es5-shim'
Π― Π²ΠΈΠ΄Π΅Π» Π»ΡΠ΄Π΅ΠΉ, Π³ΠΎΠ²ΠΎΡΡΡΠΈΡ , ΡΡΠΎ ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΡΠ°Π²ΠΈΡΡ, ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°Π² ΠΏΠ°ΠΊΠ΅Ρ ace-build webpack, Π½ΠΎ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΏΠ°ΠΊΠ΅Ρ, Π° Π½Π΅ webpack
import AceEditor from 'react-ace';
import 'ace-builds/src-noconflict/worker-json';
import 'ace-builds/src-noconflict/mode-json';
import 'ace-builds/src-noconflict/theme-github';
import 'ace-builds/src-noconflict/ext-searchbox';
render() {
<AceEditor
mode='json'
fontSize={14}
theme='github'
value={value}
onChange={this.onChange}
editorProps={{ $blockScrolling: true }}
setOptions={{
minLines: 4,
maxLines: 30,
enableBasicAutocompletion: true,
enableLiveAutocompletion: true,
enableSnippets: false,
showLineNumbers: true,
tabSize: 4,
useWorker: true,
}}
/>
}
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ :)
Π£ ΠΌΠ΅Π½Ρ ΡΠ°ΠΊΠ°Ρ ΠΆΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Ρ worker-javascript.
Π»ΡΠ±ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π²ΠΎΠΏΡΠΎΡΠ° ??
ΠΡΠΎΠ΄Π΅ ΠΏΡΠΈΠ΄ΡΠΌΠ°Π» ΠΎΠ±Ρ ΠΎΠ΄Π½ΠΎΠΉ ΠΏΡΡΡ (ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅, Π½Π° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ ΠΎΠ½ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ Π±Π»ΠΎΠΊΠΈΡΠΎΠ²ΡΠΈΠΊ)
ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ Π² package.json
https://en.parceljs.org/module_resolution.html#aliases
"alias": {
"ace/lib/es5-shim": "ace-builds/src-noconflict/ace.js"
}
ΠΠ°ΠΌ ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ Π²ΡΠ΅ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΡΠ΅ ΡΠ°ΠΉΠ»Ρ worker-*.js
ΠΈΠ· node_modules/ace-builds/src-noconflict
Π² ΠΏΠ°ΠΏΠΊΡ /dist
.
ΠΠ΅ Π·Π½Π°Ρ ΠΏΠΎΡΠ΅ΠΌΡ, Π½ΠΎ, ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅, ΠΎΠ½ ΡΡΡΠΎΠΈΡΡΡ ΠΈ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ. π€·ββοΈ
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
Π£ ΠΌΠ΅Π½Ρ ΡΠ°ΠΊΠ°Ρ ΠΆΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Ρ worker-javascript.