如何在 ember-cli 构建我的应用程序期间过滤掉文件（特别是过滤摩纳哥的许多文件）

Question

我正在尝试减少 monaco-editor 依赖大小。
我找到了 this 答案，其中显示了如何在 angular 上执行此操作 - 通过编辑 angular.json 文件中的 glob 配置。
ember上这个配置对应的文件是什么？

编辑
我发现 this 阅读我在 ember-cli-build 上的配置，知道如何配置吗？

module.exports = function (defaults) {
  const app = new EmberApp(defaults, {
    autoImport: {
      alias: {
        'monaco-editor': '** what here? **',
      },
    },

Answer 1

我不知道如何阅读那里的 angular 评论，但我所做的是使用 esbuild 构建我自己的 Monaco 副本。

I am trying to reduce monaco-editor dependency size.

一般来说，如果您使用的是刺绣，如果您不导入它，它就不会成为您构建的一部分。

这可能比您正在寻找的 try-hard 多，但可以让您更好地控制自己的资产。

这是我的包裹，我在那里做的：https://github.com/NullVoxPopuli/limber/tree/main/packages/monaco

我使用这个构建脚本：

'use strict';

const path = require('path');
const os = require('os');
const fs = require('fs').promises;
const copy = require('recursive-copy');
const esbuild = require('esbuild');
const { esBuildBrowserTargets } = require('@nullvoxpopuli/limber-consts');

const OUTPUT_DIR = path.join(__dirname, 'dist').toString();

const ME = path.dirname(require.resolve('monaco-editor/package.json'));

const cssLocation = path.join(`${ME}/min/vs/editor`);

const workers = {
  base: path.join(ME, 'esm/vs/editor/editor.main.js'),
  editor: path.join(ME, 'esm/vs/editor/editor.worker.js'),
  json: path.join(ME, 'esm/vs/language/json/json.worker.js'),
  css: path.join(ME, 'esm/vs/language/css/css.worker.js'),
  html: path.join(ME, 'esm/vs/language/html/html.worker.js'),
  ts: path.join(ME, 'esm/vs/language/typescript/ts.worker.js'),
};

/**
 * - Builds Web Workers
 * - Builds a preconfigured bundle with monaco-editor
 * - Copies tall relevant CSS to the same output folder
 */
module.exports = async function build() {
  let buildDir = await fs.mkdtemp(path.join(os.tmpdir(), 'monaco--workers-'));

  await esbuild.build({
    loader: { '.ts': 'ts', '.js': 'js', '.ttf': 'file' },
    entryPoints: [
      workers.editor,
      workers.json,
      workers.css,
      workers.html,
      workers.ts,
      workers.base,
    ],
    bundle: true,
    outdir: buildDir,
    format: 'esm',
    target: esBuildBrowserTargets,
    minify: false,
    sourcemap: false,
  });

  await esbuild.build({
    loader: { '.ts': 'ts', '.js': 'js', '.ttf': 'file' },
    entryPoints: [path.join('preconfigured', 'index.ts')],
    bundle: true,
    outfile: path.join(buildDir, 'preconfigured.js'),
    format: 'esm',
    target: esBuildBrowserTargets,
    // something silly is going on with Monaco and esbuild
    // TODO: report this to ESBuild's GitHub
    minify: false,
    sourcemap: false,
  });

  await copy(`${buildDir}`, OUTPUT_DIR, {
    overwrite: true,
    filter: ['**/*', '!*.nls.*'],
    rename(filePath) {
      if (filePath.includes('ttf')) {
        return 'codicon.ttf';
      }

      return filePath;
    },
  });

  await copy(`${cssLocation}`, OUTPUT_DIR, {
    overwrite: 'inline',
    filter: ['**/*.css'],
  });

  // TODO: how to change the monaco config to allow this to be in a `monaco/` folder
  // const ICON_PATH = 'base/browser/ui/codicons/codicon/codicon.ttf';
  // await copy(path.join(ME, 'esm/vs', ICON_PATH), ICON_PATH)
};

if (require.main === module) {
  module.exports();
}

然后在我的 ember-cli-build.js 中：https://github.com/NullVoxPopuli/limber/blob/main/frontend/ember-cli-build.js#L50 （合并 extraPublic 树）

我调用：

  // Desktop Editor
  require('@nullvoxpopuli/limber-monaco/broccoli-funnel')(),

broccoli-funnel

'use strict';

const path = require('path');
const Funnel = require('broccoli-funnel');

const SRC_FILES = path.join(__dirname, 'dist');

/**
 * This broccoli funnel is for copying the built assets to a target
 * app's public folder. No building occurs
 *
 */
module.exports = function monacoFunnel() {
  return new Funnel(SRC_FILES, {
    destDir: 'monaco/',
  });
};

然后我通过 修饰符 加载摩纳哥，如下所示：

import { assert } from '@ember/debug';

import type { Args } from './-types';
/**
 * I wish there was a way to specify types-only packages
 * while Limber uses Monaco, it's provided by the limber-monaco
 * broccoli funnel (copied into the public folder).
 *
 * So the devDep on monaco-editor in limber/frontend is *solely*
 * for the type defs
 */
import type * as monaco from 'monaco-editor';

export default function installMonaco(element: HTMLElement, ...[value, updateText, named]: Args) {
  assert(`Expected MONACO to exist`, MONACO);

  element.innerHTML = '';

  let { editor, setText } = MONACO(element, value, updateText, named);

  named.setValue((text) => {
    // changing the text this ways calls updateText for us
    // updateText(text); // update the service / URL
    setText(text); // update the editor
  });

  return () => editor?.dispose();
}

let MONACO:
  | undefined
  | ((
      element: HTMLElement,
      ...args: Args
    ) => { editor: monaco.editor.IStandaloneCodeEditor; setText: (text: string) => void });

export async function setupMonaco() {
  if (MONACO) return;

  // TypeScript doesn't have a way to type files in the public folder
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  MONACO = (await import(/* webpackIgnore: true */ '/monaco/preconfigured.js')).default;
}

和用法：

import monacoModifier from './my-monaco-modifier';

export default class Demo extends Component {
  monaco = monacoModifier
}

<div {{this.monaco}}></div>

您可以在此处查看实际操作：https://limber.glimdown.com/

Answer 2

我通过跳过语言导入解决了这个问题（我不需要，因为我使用自定义语言。
在 webpackConfig 下添加以下内容：

      new MonacoWebpackPlugin({
        languages: [],
      }),

这是 ember-cli-build.js 中的完整配置：

  return require('@embroider/compat').compatBuild(app, Webpack, {
    staticAddonTestSupportTrees: true,
    staticAddonTrees: true,
    staticHelpers: true,
    // staticComponents: true,
    onOutputPath(outputPath) {
      writeFileSync(join(__dirname, '.embroider-app-path'), outputPath, 'utf8');
    },
    packagerOptions: {
      webpackConfig: {
        module: {
          rules: [
            {
              test: /\.(png|jpg|gif|svg|woff|woff2|eot|ttf|otf|flac)$/i,
              loader: 'file-loader',
              options: {
                name: '[path][name]-[contenthash].[ext]',
              },
            },
          ],
        },
        plugins: [
          new MonacoWebpackPlugin({
            languages: [],
          }),
        ],
      },
    },

});

如何在 ember-cli 构建我的应用程序期间过滤掉文件（特别是过滤摩纳哥的许多文件）

how to filter out files during when ember-cli is building my app (filtering monaco's many files, specifically)

ember.js

monaco-editor