目次
6. monaco-editorで使用するJSファイルの圧縮方法 (2020/04/28 11:49:58)
序文
オンライン チュートリアルを確認しましたが、そのほとんどは vue または React フレームワークに基づいており、純粋な webpack に基づいたチュートリアルはほとんどありませんでした。この点に関するインターネット上の情報不足を補うために、この記事では webpack で monaco-editor を使用するプロセスを記録します。この記事は私の成長に応じて随時更新されます。
使用
monaco の使い方についてはインターネット上に多数紹介されているので、この記事を参照して全体を理解してください。
自分なりにまとめた利用の流れ
1. インストールします。
npm install monaco-editor -save2. ページ内での使用
HTML でコンテナを作成し、次のコードを使用して初期化してオンライン エディタを取得します。ただし、このエディタは単なるエディタであり、コード ヒントや右クリック メニューなどの補助機能はありません。
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
const monacoInstance=monaco.editor.create(document.getElementById("monaco"),{
value:`console.log("hello,world")`,
language:"javascript"
})レンダリング:
3. 補助機能をオンにする
補助機能を有効にする方法は、必要に応じて補助ファイルをページにインポートする方法です。その方法は、[使用] の章で提供されるアドレスを参照する方法であり、もう 1 つは webpack を使用して実現します。
monaco-editor-webpack-plugin モジュールをインストールします。
npm install monaco-editor-webpack-pluginwebpack.config.js で構成された MonacoWebpackPlugin は、補助機能を構成する言語と機能を受け入れることができます。特定の構成パラメーターについては、npm 公式 Web サイトを確認できます。
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = {
...
plugins: [
new MonacoWebpackPlugin()
]
}レンダリングは次のとおりです。
ただし、ここで注意すべき点がいくつかあります。ブロガーが使用中に発見したいくつかの状況を次に示します。
1) Webpack プロジェクトで HtmlWebpackPlugin を使用してマルチページ構成を実現する場合、monaco-editor-webpack-plugin によって生成される一部のファイルの参照パスは、HtmlWebpackPlugin の構成の影響を受けます。たとえば、次のコードを使用して HTML テンプレートの情報を動的に構成し、ファイル名をファイルから名前を付けるだけでなく、そのパスも設定できます。ファイル名を `pages/${name}.html` に変更し、HTML ファイルをページのパスの下に置くと、monaco-editor-webpack-plugin によって生成されたすべてのファイルが参照されるときにページのパスが追加されます。ご存知の方がいらっしゃいましたら、ご指摘よろしくお願いします。
var getHtmlConfig = function(name,chunks){
return {
template:`./src/app/pages/${name}.html`,
filename:`${name}.html`,
inject:true, // 将js资源插入到body元素底部
hash:false,
chunks:[name, 'runtime','libs', 'commons']
}
}2)、monaco-editor-webpack-plugin パラメーターfilename仅更改worker文件的名字，而无法更改其他生成的JS文件名称。
3)、MonacoWebpackPlugin の言語パラメーターの構成は、右クリック メニューに影響します。テスト後: 言語に typescript が導入されていない場合、右クリック メニューとコントロール パネルの一部の機能が表示されなくなります。
4、如何设置菜单中文显示效果
この機能は家主を長い間悩ませました。インターネット上にはこのシステムに関する情報はありません。ただし、一部の記事では、次のコードを構成に使用している人が散発的に見られます。
require.config({
'vs/nls': {
availableLanguages: {
'*': 'zh-cn'
}
}
});しかし、このコードを自分のコードにコピーすると、まったく実行できないことがわかります。じゃあ何をすればいいの？
ここには他の 2 つのモジュールが関与する必要があります。monaco-editor-esm-webpack-plugin と monaco-editor-nls。このうち、monaco-editor-esm-webpack-plugin は上記の monaco-editor-webpack-plugin とは異なり、前者は後者に依存する必要があるため、前者を使用するには後者をインストールする必要があります。最初に 2 つのモジュールをインストールします。
npm install --save monaco-editor-nls
npm install --save-dev monaco-editor-esm-webpack-pluginwebpack.config.js を書き換えます。MonacoWebpackPlugin.loader もルールに追加する必要があることに注意してください。
// 去除monaco-editor-webpack-plugin，改为monaco-editor-esm-webpack-plugin
const MonacoWebpackPlugin = require('monaco-editor-esm-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.js/,
enforce: 'pre',
include: /node_modules[\\\/]monaco-editor[\\\/]esm/,
use: MonacoWebpackPlugin.loader
},
]
}
plugins: [
new MonacoWebpackPlugin()
]
}次に、ページの JS に次のコードを追加します。これらのコードは、「monaco-editor/esm/vs/editor/editor.api.js」を導入する前に追加する必要があります。
import { setLocaleData } from 'monaco-editor-nls';
import zh_CN from 'monaco-editor-nls/locale/zh-hans';
setLocaleData(zh_CN);次にファイルを再編集すると、コンパイル コンソールにエラーが表示され、monaco-editor/esm/vs/editor/contrib の下に goToDefinition フォルダーが存在しないことがわかります。実際、referenceSearch がまだありません。の解き方？まず最初に、これら 2 つのフォルダーが存在しないことを説明しますが、[email protected] 以降では、Microsoft がこれらのファイルを gotoSymbol フォルダーに配置しているため、monaco-editor バージョン 0.18.1 としてインストールして使用できますが、一部のプラグインのソース コードを変更する必要があります。@0.20.0 をインストールする必要がある場合は、ファイル \node_modules\monaco-editor-esm-webpack-plugin\node_modules\monaco-editor-webpack-plugin\features.js を変更するだけで済みます。
// 删除一下代码
goToDefinitionCommands: {
entry: 'vs/editor/contrib/goToDefinition/goToDefinitionCommands',
worker: undefined,
},
goToDefinitionMouse: {
entry: 'vs/editor/contrib/goToDefinition/goToDefinitionMouse',
worker: undefined,
},
referenceSearch: {
entry: [
'vs/editor/contrib/referenceSearch/referenceSearch',
'vs/editor/standalone/browser/referenceSearch/standaloneReferenceSearch',
],
worker: undefined,
}
// 新增以下代码
gotoSymbol:{
entry: 'vs/editor/contrib/gotoSymbol/goToCommands',
worker: undefined
}上記の操作に従って修正すると正常にコンパイルできるようになります。しかし、コンパイル後にプロジェクトを開くと、メニューがまだ英語であることがわかります。また状況はどうですか、明らかに要件に応じて変更されました。なぜこの問題が発生するのかはわかりませんが、以下の方法に従ってください。最初に editor.api.js を導入したとき、インポートには import を使用していましたが、これを import に要求するように変更するだけです。
const monaco = require('monaco-editor/esm/vs/editor/editor.api');
// import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
const monacoInstance = monaco.editor.create(document.getElementById("monaco"),{
value: `console.log(123)`,
contextmenu: true,
language: 'javascript',
theme: 'vs-dark'
})この時点で、メニューのローカライズは完了し、再パッケージ化して実行した後の効果は次のようになります。
5. エディター機能（更新日：2020年8月24日）
1)、動的割り当て
monacoInstance = monaco.editor.create(document.getElementById("monaco"),{
value: ``,
contextmenu: true,
language: 'javascript',
theme: 'vs-dark'
})
monacoInstance.setValue(res);2)、言語を動的に変更する
monaco.editor.setModelLanguage(monacoInstance.getModel(), 'html');
monaco.editor.setModelLanguage(monacoInstance.getModel(), 'javascript');3) カーソル位置を取得する
monacoInstance.getPosition();
// 返回参数
// lineNumber 行数
// column 列数4) カーソル位置を設定します。
// 两个参数最好都写，不然控制台会报错
monacoInstance.setPosition({
lineNumber: 115,
column: 1
})
5)、フォーカスエディター
monacoInstance.focus();6)、エディターが一番上までスクロールします
monacoInstance.setScrollPosition({
scrollTop: 0,
scrollLeft: 0
});7) 現在のエディターの行数を取得します。
monacoInstance.getModel().getLineCount()8) 行の列数を取得する
monacoInstance.getModel().getLineLength(2)9)、特定の行にデータを挿入します
function insertValueByCurrentPosition(value) {
var p = monacoInstance.getPosition();
monacoInstance.executeEdits("",
[
{
range: new monaco.Range(p.lineNumber,
p.column,
p.lineNumber,
p.column),
text: value
}
]
);
}6. monaco-editorで使用するJSファイルの圧縮方法 (2020/04/28 11:49:58)
Webpack で使用する圧縮 JS モジュールは通常、uglifyjs-webpack-plugin を使用します。プロジェクトで monaco-editor を使用する場合、uglifyjs-webpack-plugin を使用してエディターに必要な JS を圧縮すると、コンソールにエラー メッセージが出力され、2 つのエラー メッセージが表示されます。1 つは worker.js 関連のエラーに関するもので、もう 1 つは予期しないトークン: name «__insane_func»、expected: punc «;» です。上記 2 つのエラーは基本的に、monaco-editor での最新の ESM 構文の使用が原因で発生します。この構文は、uglifyjs-webpack-plugin では正常に解析できません。これに対処するには 2 つの方法があります。
1) uglifyjs-webpack-plugin を引き続き使用します。worker.js を exclude パラメーターに追加し、chunkFilter で Unexpected token: name «__insane_func», Expected: punc «;» エラーを引き起こすファイルを削除します。これらのファイルを圧縮せずに通常どおりコンパイルします。
module.exports = {
optimization: {
minimizer: [
new UglifyJSPlugin({ //目的是为了编译环境清除控制台以及关闭注释
exclude: /\.min\.js|\.worker\.js|\/libs-bundle$/,
cache: true,
parallel: true, // 开启并行压缩，充分利用cpu
extractComments: false, // 移除注释
chunkFilter: (chunk) => { // 需要加上这个，不然monaco-editor采用新的es语法，uglify无法解析
if (chunk.name == 'libs') {
return false;
}
return true
},
uglifyOptions: {
output: {
comments: false // 保留所有的注释
},
compress: {
drop_debugger: true,
drop_console: true // 删除所有的 `console` 语句，可以兼容ie浏览器
}
}
}),
]
}
}2) uglifyjs-webpack-plugin を使用する代わりに、このモジュールを terser-webpack-plugin に置き換えます。これら 2 つのプラグインのパラメーターや使用方法は基本的に同じであり、後者は前者のバージョンアップ版であることがわかります。参考資料: [ポータル 1、ポータル 2、ポータル 3 ]。以下は私の構成コードです。
module.exports = {
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({ //目的是为了编译环境清除控制台以及关闭注释
exclude: /\.min\.js$/,
cache: true,
parallel: true, // 开启并行压缩，充分利用cpu
extractComments: false, // 移除注释
terserOptions: {
output: {
comments: false // 保留所有的注释
},
compress: {
drop_debugger: true,
drop_console: true // 删除所有的 `console` 语句，可以兼容ie浏览器
}
}
}),
]
}
}追記:2020年4月23日 15:22:48 このエディタを使用する過程で、ブロガーは長い間右往左往し、特に不可解なパスの追加とローカライズに非常に時間がかかりました。Baidu と Google は解決策を見つけていません。幸いなことに、私はついに欲しかったものを手に入れました。上記のプラグイン モジュールの開発者に感謝します。