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

Question

我在我的项目中使用反应脚本。我使用一些较新的语法，需要我的 webpack.config 使用插件，例如

plugins: ['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]
    }
  }

问题是

plugins: [transform-decorators-legacy]

缺少引号。这是我的脚本中遗漏的字符转义问题吗？

以及产品配置文件。我需要在

之后插入它

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 允许这在搜索模式中）。您的产品脚本将是（如果需要更改目录）：

"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 文件中的脚本更改源文件

How to use a script in package.json file to make changes to source files

reactjs

npm

vi

package.json