umi2.9可以使用什么版本的webpack-obfuscator
时间: 2023-09-05 22:10:30 浏览: 38
根据 `umi` 官方文档,`umi@2.9` 使用的是 `webpack@4`,建议使用 `webpack-obfuscator@0.12.x` 版本,因为该版本是兼容 `webpack@4` 的。你可以在 `package.json` 中添加如下依赖来安装该版本的 `webpack-obfuscator`:
```
"webpack-obfuscator": "^0.12.0"
```
相关问题
umi2.9中如何使用webpack-obfuscator
你可以通过以下步骤在umi 2.9中使用webpack-obfuscator:
1. 安装webpack-obfuscator插件:
```
npm install webpack-obfuscator --save-dev
```
2. 在.umirc.js或config/config.js中配置webpack插件:
```javascript
export default {
// ...
chainWebpack(config) {
// 添加webpack-obfuscator插件
config.plugin('webpack-obfuscator').use(require('webpack-obfuscator'), [{
// obfuscator选项
// 参考文档:https://github.com/javascript-obfuscator/javascript-obfuscator#javascript-obfuscator-options
compact: true,
controlFlowFlattening: true,
controlFlowFlatteningThreshold: 0.75,
deadCodeInjection: true,
deadCodeInjectionThreshold: 0.4,
debugProtection: false,
debugProtectionInterval: false,
disableConsoleOutput: true,
identifierNamesGenerator: 'hexadecimal',
log: false,
renameGlobals: false,
rotateStringArray: true,
seed: 0,
selfDefending: true,
shuffleStringArray: true,
splitStrings: false,
stringArray: true,
stringArrayEncoding: false,
stringArrayThreshold: 0.75,
unicodeEscapeSequence: false
}])
}
}
```
可以根据项目需要调整obfuscator选项。
3. 执行build命令,生成混淆代码:
```
umi build
```
执行完毕后,你会得到一个经过混淆的代码文件。
umi配置monaco-editor-webpack-plugin
如果你使用的是 UmiJS 框架,你可以在配置文件中使用 `monaco-editor-webpack-plugin` 插件。
首先,你需要安装 `monaco-editor-webpack-plugin`,可以使用以下命令进行安装:
```
npm install monaco-editor-webpack-plugin --save-dev
```
接下来,在 UmiJS 的配置文件 `config/config.js` 中,你可以添加以下代码来配置 `monaco-editor-webpack-plugin` 插件:
```javascript
import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
export default {
// ...
chainWebpack(config, { webpack }) {
config.plugin('monaco-editor').use(MonacoWebpackPlugin, [
{
// Languages are loaded on demand at runtime
languages: ['json'],
// Optional: includes will be used to determine which files to include
includes: ['**/*.json'],
// Optional: excludes will be used to determine which files to exclude
excludes: ['node_modules'],
},
]);
},
// ...
};
```
这个配置将会加载 `monaco-editor-webpack-plugin` 插件,并且添加了一个 `MonacoWebpackPlugin` 插件实例。这个插件可以根据你的配置来打包和加载 `monaco-editor` 的语言包,这里示例中只加载了 `json` 语言包。
最后,你需要在你的组件中导入 `monaco-editor`,并且进行使用:
```javascript
import React from 'react';
import MonacoEditor from 'react-monaco-editor';
class MyComponent extends React.Component {
render() {
return (
<MonacoEditor
language="json"
theme="vs-dark"
defaultValue="{}"
onChange={this.onChange}
editorDidMount={this.editorDidMount}
/>
);
}
}
```
在这个组件中,我们使用了 `react-monaco-editor` 库来创建一个 `MonacoEditor` 组件,并且指定了语言为 `json`,主题为 `vs-dark`,默认值为 `{}`。你可以根据你的需求来调整这些参数。