javascript - babel es5 到 es6 在导入时将 less 扩展转换为 css

Question

我编写了一些 npm 脚本，在发布到 npm 之前构建 ./lib 目录。
1.脚本负责将./src/components/中所有es6*.js文件转换为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/.