Reactjs 如何使用package.json文件中的脚本对源文件进行更改

我正在我的项目中使用react脚本。我使用了一些更新的语法，需要我的webpack.config使用插件，例如

插件：['transform-decorators-legacy']

我试图避免弹出配置文件，只是为了将这一行添加到webpack.config.dev和webpack.config.prod文件中

所以我试图制作一个脚本来自动插入它

在dev文件中，我需要在cacheDirectory:true之后插入它

 // Process JS with Babel.
  {
    test: /\.(js|jsx)$/,
    include: paths.appSrc,
    loader: 'babel',
    query: {
      // @remove-on-eject-begin
      babelrc: false,
      presets: [require.resolve('babel-preset-react-app')],
      // @remove-on-eject-end
      // This is a feature of `babel-loader` for webpack (not Babel itself).
      // It enables caching results in ./node_modules/.cache/babel-loader/
      // directory for faster rebuilds.
      cacheDirectory: true
    }
  }

我想出了这个来插入它

"fix-react-scripts-dev": "ex -sc '%s/cacheDirectory: true/cacheDirectory: true,plugins: ['transform-decorators-legacy']/g|x' node_modules/react-scripts/config/webpack.config.dev.js"

结果是

  {
    test: /\.(js|jsx)$/,
    include: paths.appSrc,
    loader: 'babel',
    query: {
      // @remove-on-eject-begin
      babelrc: false,
      presets: [require.resolve('babel-preset-react-app')],
      // @remove-on-eject-end
      // This is a feature of `babel-loader` for webpack (not Babel itself).
      // It enables caching results in ./node_modules/.cache/babel-loader/
      // directory for faster rebuilds.
      cacheDirectory: true,
      plugins: [transform-decorators-legacy]
    }
  }

问题是

插件：[transform decorators legacy]

缺少引号。这是我脚本中缺少的角色转义问题吗

以及prod config文件。我需要在后面插入它

presets: [require.resolve('babel-preset-react-app')]

// Process JS with Babel.
  {
    test: /\.(js|jsx)$/,
    include: paths.appSrc,
    loader: 'babel',
    // @remove-on-eject-begin
    query: {
      babelrc: false,
      presets: [require.resolve('babel-preset-react-app')]
    }
    // @remove-on-eject-end
  }

---

脚本的问题在于，命令字符串的结尾是单引号。这对bash来说不是问题，因为在第二个单引号重新打开单引号字符串之前，它只会将字符串的其余部分视为一个无引号字符串。但是，首选字符串也会中断JSON字符串！您需要一个转义序列，该序列使用转义双引号在单引号字符串中转义单引号。结果是

“\\”

。这将结束第一个字符串，启动不结束JSON字符串的双引号字符串，输入单引号，结束双引号字符串而不结束JSON字符串，然后启动另一个单引号字符串。因此，您的脚本变成：

"fix-react-scripts-dev": "ex -sc '%s/cacheDirectory: true/cacheDirectory: true,plugins: ['\"'\"'transform-decorators-legacy'\"'\"']/g|x' node_modules/react-scripts/config/webpack.config.dev.js"

至于第二部分，我将假设您在其中放置了两次

预设值

，因为它位于代码块之外没有意义。如果这是真的，那么插件行需要位于

查询中的预设行下方。如果这个假设是错误的，请让我知道

对于单引号，这需要一个类似的超级转义序列，但匹配
预设
行还有另一个问题。此行不仅有单引号，还有方括号。这些也需要转义，否则它们内部的破折号将被视为
%s
搜索模式中范围搜索的一部分（想想如何在regex中执行
[a-z]
，vim允许在搜索模式中执行此操作）。然后，您的prod脚本将是（如果需要，请更改目录）：

"fix-react-scripts-prod": "ex -sc '%s/presets: \\[require.resolve('\"'\"'babel\\-preset\\-react\\-app'\"'\"')\\]/presets: \\[require.resolve('\"'\"'babel\\-preset\\-react\\-app'\"'\"')\\],plugins: \\['\"'\"'transform\\-decorators\\-legacy'\"'\"'\\]/g|x' node_modules/react-scripts/config/webpack.config.prod.js"