babel es5到es6在导入时将较少的扩展名转换为CSS

Question

在发布到npm之前，我编写了一些构建./lib目录的npm脚本。
1.脚本负责将es6所有es6 *.js文件./src/components/为es5语法，然后将文件复制到./lib （相同的结构）。
这是脚本：

"cross-env NODE_ENV=production babel ./src/components --out-dir ./lib --ignore spec.js --copy-files"

这是.babelrc文件：

{
  "presets": [
    "react",
    "stage-1"
  ],
  "env": {
    "development": {
      "presets": [
        "latest",
        "react-hmre"
      ]
    },
    "production": {
      "presets": [
        [
          "latest",
          "es2015"
        ]
      ],
      "plugins": [
        "transform-react-constant-elements",
        "transform-react-remove-prop-types",
        [
          "transform-imports",
          {
            "react-bootstrap": {
              "transform": "react-bootstrap/lib/${member}",
              "preventFullImport": true
            },
            "lodash": {
              "transform": "lodash/${member}",
              "preventFullImport": true
            }
          }
        ]
      ]
    },
    "test": {
      "presets": [
        "latest"
      ]
    }
  }
}

我还有另一个脚本负责将.less文件转换为.css并将它们复制到./lib （相同结构）：

"lessc-glob ./src/components/**/*.less lib"

一切都按预期工作，但我现在有一个问题。 我在.js文件中拥有的import是指.less文件，但我需要将其更改为.css扩展名。
为了清楚起见，
我现在所拥有的是：

import css from './styles.less';

转换为：

var _styles = require('./styles.less'); 

但我希望将其转换为：

var _styles = require('./styles.css'); 

Answer 1

可以安装replace并将其用于查找.less实例，然后在最终的ES5 .js文件中将它们替换为.css 。

npm脚本

如下所示将replace脚本添加到package.json中：

...
"scripts": {
  ...
  "replace": "replace \".less\" \".css\" ./lib/components/ -r --include=\"*.js\""
},
...

然后可以将对replace脚本的调用链接到负责转换所有es6 *.js文件的脚本的末尾。 例如

...
"scripts": {
  ...
  "quux": "cross-env NODE_ENV=production babel ./src/components --out-dir ./lib --ignore spec.js --copy-files && npm run replace",
  "replace": "replace \".less\" \".css\" ./lib/components/ -r --include=\"*.js\""
  ...
},
...

请注意 && npm run replace 部分已添加到当前quux脚本的末尾。

我假设components文件夹也被复制到lib文件夹。 如果不是，那么replace脚本中的./lib/components/部分将需要更改为./lib/ 。