babel es5 到 es6 在导入时将较少的扩展名转换为 css
babel es5 to es6 converting less extension to css on imports
在发布到 npm 之前,我编写了一些构建 ./lib
目录的 npm 脚本。
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');
replace 可以安装并用于查找 .less 的实例并将它们替换为 .css 在你的结果 ES5 .js
file/s.
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\""
...
},
...
请注意添加到当前 quux
脚本末尾的 && npm run replace
部分。
我假设 components
文件夹也被复制到 lib
文件夹。如果不是,则需要将 replace
脚本中的 ./lib/components/
部分更改为 ./lib/
.
在发布到 npm 之前,我编写了一些构建 ./lib
目录的 npm 脚本。
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');
replace 可以安装并用于查找 .less 的实例并将它们替换为 .css 在你的结果 ES5 .js
file/s.
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\""
...
},
...
请注意添加到当前 quux
脚本末尾的 && npm run replace
部分。
我假设 components
文件夹也被复制到 lib
文件夹。如果不是,则需要将 replace
脚本中的 ./lib/components/
部分更改为 ./lib/
.