Объединенный импорт изображений, компилируемых как const в файл сборки - PullRequest
0 голосов
/ 31 января 2020

Так что моя проблема возникает в старых браузерах. В настоящее время выполняется тестирование Safari на iPad Mini под управлением iOS 9.3.5.

. В консоли появляется следующая ошибка

Unexpected keyword 'const'. Const declarations are not supported in strict mode.

при импорте в компонент React

import twoMinOrangeSvg from '../../img/supporting/2-min-orange.svg';

в моем индексе сборки. js файл, который компилируется в svg как const, вместо var

const img = 'data:image/svg+xml;utf-8,<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">....path code here.....</svg>';

Это мой rollup.config.js файл. Я импортировал плагин @rollup/plugin-image, который, кажется, является причиной, по которой это происходит ...

import babel from 'rollup-plugin-babel';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import postcss from 'rollup-plugin-postcss';
import filesize from 'rollup-plugin-filesize';
import autoprefixer from 'autoprefixer';
import localResolve from 'rollup-plugin-local-resolve';
import json from 'rollup-plugin-json';
import pkg from './package.json';
import externals from 'rollup-plugin-node-externals';
import builtins from 'rollup-plugin-node-builtins';
import globals from 'rollup-plugin-node-globals';
import image from '@rollup/plugin-image';
import { terser } from 'rollup-plugin-terser';

const ENVIRONMENT = process.env.ENVIRONMENT;
const PRODUCTION = ENVIRONMENT === 'production';

const config = {
  input: 'src/index.js',
  watch: {
    chokidar: {
        usePolling: true,
        paths: 'src/**'
    }
  },
  output:
   [
    {
      file: pkg.browser,
      format: 'umd',
      name: 'Example',
    },
    {
      file: pkg.main,
      format: 'cjs',
      name: 'Example',
    },
    {
      file: pkg.module,
      format: 'es',
    },
  ],
  external: [
    'react',
    'react-dom',
    'styled-components',
    'formik',
    'scheduler',
    'date-fns'
  ],
  globals: {
      // Use external version of React
      "react": "React"
  },
  plugins: [
    PRODUCTION &&  globals(),
    PRODUCTION &&  builtins(),
    PRODUCTION &&  externals(),
    babel({ exclude: 'node_modules/**', presets: ['@babel/env', '@babel/preset-react'] }),
    PRODUCTION &&  commonjs({
      namedExports: {
        // left-hand side can be an absolute path, a path
        // relative to the current directory, or the name
        // of a module in node_modules
        'node_modules/formik/node_modules/scheduler/index.js' : ['unstable_runWithPriority'],
      }
    }),
    PRODUCTION && peerDepsExternal(),
    PRODUCTION && postcss({ extract: true, plugins: [autoprefixer] }),
    PRODUCTION && json({  include: 'node_modules/**' }),
    PRODUCTION && localResolve(),
    PRODUCTION && resolve({dedupe: [ 'react', 'react-dom' ]}),
    PRODUCTION && filesize(),
    image(),
    PRODUCTION && terser()
  ]
};

export default config;

Любая помощь будет принята с благодарностью.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...