Search code examples
ember.jsmonaco-editor

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


I am trying to reduce monaco-editor dependency size.
I found this answer which shows how to do it on angular - by editing the glob configuration in angular.json file.
What is the corresponding file for this configuration on ember?

EDIT
I found this read me for configuring on ember-cli-build, any idea how to configure?

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

Solution

  • I solved the issue by skipping languages import (which I don't need since I use custom language.
    adding the following under webpackConfig:

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

    Here is the full config in 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: [],
              }),
            ],
          },
        },
    

    });