Question

我在我的项目中使用react-scripts。我使用一些较新的语法，需要我的webpack.config使用插件，如

插件：[＆＃39; transform-decorators-legacy＆＃39;]

我试图避免弹出配置文件只是为了将此行添加到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配置文件。我需要在

之后插入它

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
  }

Answer 1

您的脚本存在的问题是您使用单引号结束命令字符串。这不是bash的问题，因为它只会将字符串的其余部分视为不带引号的字符串，直到第二个单引号重新打开单个带引号的字符串。但是，首选的method to escape single quotes in 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"

至于第二部分，我只是假设你通过将presets放在那里两次来做错字，因为它在代码块之外是没有意义的。如果这是真的，那么插件行需要在query的预设行下面。如果这个假设是错误的，请告诉我。

对于单引号，这需要类似的超级转义序列，但是匹配presets行还有另一个问题。这一行不仅有单引号，还有方括号。那些也需要被转义，否则其中的破折号将被视为%s搜索模式中范围搜索的一部分（想想你如何在正则表达式中[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"

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

1 个答案: