react-ace ace-build代码高亮，提示打包过大，动态引入问题

前言

，最近在项目中需要实现一个前端在线代码编辑器，在使用react-ace遇到了一些打包和引入的问题在这里分享一下，
使用版本react-ace v9.4.0 ace-builds v1.4.12

react-ace

在使用react-ace的时候 引入组件后运行代码发现 语言，主题以及代码提示还需要引入额外的js文件如下

        <AceEditor
            placeholder="请输入脚本"
            mode="javascript"
            theme="xcode"
            name="blah2"
            width="100%"
            height="200px"
            // onLoad={_onLoad}
            //value={props.value}
            //readOnly={props.readOnly}
            //onChange={props.onChange}
            fontSize={14}
            showPrintMargin={props.showPrintMargin || false}
            //showGutter={props.showGutter}
            highlightActiveLine={props.highlightActiveLine ||false}
            setOptions={{
                enableBasicAutocompletion: true,
                enableLiveAutocompletion: true,
                enableSnippets: true,
                showLineNumbers: true,
                tabSize: 2,
            }} />

这时候再引入对应的ace-build js 文件 一番查找后发现了两种引入方式。直接引入js时控制台会报错找不到js文件 这时候还需要在引入ace-builds/webpack-resolver

import "ace-builds/src-noconflict/theme-xcode";
import "ace-builds/src-noconflict/mode-javascript";
import "ace-builds/src-noconflict/mode-json"
import "ace-builds/src-noconflict/ext-language_tools";
import "ace-builds/webpack-resolver"

使用这种方法后发现打包了很多不需要的东西 ，查看webpack-resolver源文件后，可以看到，webpack-resolver是将所有的包都引入了.。并且利用了file-loader这个打包工具

这时候我们就可以使用另一种引入方式 动态引入，通过import ace from “ace-builds” 然后ace.config.setModuleUrl来引入，直接复制webpack-resolver.js里自己需要的包，这里注意一下包路径，复制过来后需要改一下。如下这里依然需要引入源js 再通过ace.config.setModuleUrl导入，注意这里通过ace.config.setModuleUrl导入的不是mode 而是worker才行 如worker-javascript.js，引入的js文件还是mode-javascript

import "ace-builds/src-noconflict/theme-xcode";
import "ace-builds/src-noconflict/mode-javascript";
import "ace-builds/src-noconflict/mode-json"
import "ace-builds/src-noconflict/ext-language_tools";
import ace from "ace-builds"
ace.config.setModuleUrl('ace/mode/javascript_worker', require('file-loader?esModule=false!ace-builds/src-noconflict/worker-javascript.js'))
ace.config.setModuleUrl('ace/theme/xcode', require('file-loader?esModule=false!ace-builds/src-noconflict/theme-xcode.js'))
ace.config.setModuleUrl('ace/ext/language_tools', require('file-loader?esModule=false!ace-builds/src-noconflict/ext-language_tools.js'))
ace.config.setModuleUrl('ace/snippets/javascript', require('file-loader?esModule=false!ace-builds/src-noconflict/snippets/javascript.js'))
ace.config.setModuleUrl('ace/mode/json_worker', require('file-loader?esModule=false!ace-builds/src-noconflict/worker-json.js'))

这里多引人了一个javascript.js 是因为 代码提示ext-language_tools.js 需要这个包
这样打包后发现就只打包了引入的那几个语言包