Babel 7 不能正确转换索引.js

Question

我有一个从 Babel 6 迁移到 7 的 React 项目。现在我在尝试构建我的软件包时遇到了一个小问题。

我已经发现问题是当 Babel 命令运行时。

这是我package.json上的"babel"脚本：

"babel-build": "cross-env NODE_ENV=buildES6 babel ./src/components/ --ignore **/stories,**/*.test.js --source-maps --out-dir ./dist/my-component/"

这会将我的文件转换为dist文件夹。问题是：当我尝试在另一个 react 项目中使用dist文件夹内容时，文件似乎没有正确转换。

在我的打包项目中，我导出了 3 个组件，如下所示(我的src/components/index.js文件(：

export { FancyButton } from './FancyPanel/FancyButton';
export { MathUtils } from './FancyPanel/MathUtils';
export { SumPanel } from './FancyPanel/SumPanel';

在另一个项目中，我像这样使用我的组件(我将dist文件夹复制到该项目的node_modules文件夹中以模拟我的软件包的安装(：

import React from 'react';
import { FancyButton, MathUtils, SumPanel } from 'my-component';
class Home extends React.Component {
constructor() {
super();
}
render()
{
return (
<div>
<FancyButton
className="fancyBt"
id="myFancyBt"
text="Click me!"
title="Button to click on"
onClick={() => {alert('clicked')}}
/>
Random number: {MathUtils.getRandomArbitrary(1, 10)}
<SumPanel/>    
</div>
);
}
}
export default Home;

浏览器说：

类型错误：无法读取未定义的属性"getRandomArbitrary">

我认为我转换后的index.js应该是：

import _FancyButton from'./FancyPanel/FancyButton';export{_FancyButton as FancyButton};import _MathUtils from'./FancyPanel/MathUtils';export{_MathUtils as MathUtils};import _SumPanel from'./FancyPanel/SumPanel';export{_SumPanel as SumPanel};

但它是这样转换的：

"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"FancyButton",{enumerable:!0,get:function get(){return _FancyButton.FancyButton}}),Object.defineProperty(exports,"MathUtils",{enumerable:!0,get:function get(){return _MathUtils.MathUtils}}),Object.defineProperty(exports,"SumPanel",{enumerable:!0,get:function get(){return _SumPanel.SumPanel}});var _FancyButton=require("./FancyPanel/FancyButton"),_MathUtils=require("./FancyPanel/MathUtils"),_SumPanel=require("./FancyPanel/SumPanel");
//# sourceMappingURL=index.js.map

我想我没有很好地配置我的babel.config.js.但是我已经尝试了很多方法，问题仍然存在。

这是我的babel.config.js：

/* eslint-disable no-template-curly-in-string */
module.exports = {
plugins:
[
[
'@babel/plugin-transform-runtime',
{
corejs: false
}
],
'@babel/plugin-transform-modules-commonjs',
[
'transform-imports',
{
lodash: {
transform: 'lodash/${member}'
}
}
]
],
env: {
production: {
plugins: [
'transform-react-remove-prop-types'
]
},
test: {
presets: [
[
'@babel/preset-env'
],
'@babel/react'
]
},
commonJS: {
presets: [
[
'@babel/preset-env'
],
'@babel/react'
]
},
buildES6: {
presets: [
[
'@babel/env',
{
modules: false,
loose: true
}
],
'@babel/react',
[
'minify',
{
mangle: false
}
]
],
plugins: [
'@babel/plugin-proposal-class-properties'
]
}
}
};

有人可以帮助我修复它吗？问题出在哪里？

这是我的源代码(没有最后一个 babel 配置版本(：https://github.com/Ninita1/storybook5_babel7_webpack4

我的包.json：

"scripts": {
"babel-build": "cross-env NODE_ENV=buildES6 babel ./src/components/ --ignore **/stories,**/*.test.js --source-maps --out-dir ./dist/my-component/"
},
"dependencies": {
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-dom": "^16.9.0"
},
"devDependencies": {
"@babel/cli": "7.8.3",
"@babel/core": "7.8.3",
"@babel/plugin-proposal-class-properties": "7.8.3",
"@babel/plugin-transform-runtime": "7.8.3",
"@babel/preset-env": "7.8.3",
"@babel/preset-react": "7.8.3",
"@storybook/addon-docs": "5.3.9",
"@storybook/react": "5.3.9",
"babel-eslint": "^10.0.3",
"babel-jest": "^24.9.0",
"babel-loader": "^8.0.6",
"babel-minify": "^0.5.1",
"babel-plugin-transform-imports": "^2.0.0",
"clean-webpack-plugin": "^0.1.17",
"copy-webpack-plugin": "^4.5.3",
"cross-env": "^7.0.0",
"css-loader": "^3.4.2",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"enzyme-to-json": "^3.4.0",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-loader": "^2.1.2",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.14.3",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^5.0.2",
"jest": "^24.9.0",
"jest-html-reporters": "^1.2.1",
"js-beautify": "^1.10.2",
"lodash": "^4.17.15",
"marksy": "^8.0.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"raw-loader": "^4.0.0",
"react-addons-create-fragment": "^15.6.2",
"react-test-renderer": "^16.9.0",
"resolve-url-loader": "^3.1.1",
"style-loader": "^1.1.3",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "4.41.5",
"webpack-cli": "^3.3.10"
}

Answer 1

我已经想通了。 我应该将index.js更改为：

import FancyButton from './FancyPanel/FancyButton';
import MathUtils from './FancyPanel/MathUtils';
import SumPanel from './FancyPanel/SumPanel';
export { FancyButton, MathUtils, SumPanel };

我尝试了许多babel.config.js修改，最后我只有这个：

/* eslint-disable no-template-curly-in-string */
module.exports = {
presets: [
'@babel/preset-env',
'@babel/preset-react'
],
plugins:
[
'@babel/plugin-proposal-class-properties',
'@babel/plugin-transform-modules-commonjs'
]
};

但是在@nicolo-ribaudo的帮助下 https://github.com/babel/babel/issues/11107 我发现不应该声明@babel/plugin-transform-modules-commonjs插件，@babel/env预设必须具有modules: false，如下所示：

/* eslint-disable no-template-curly-in-string */
module.exports = {
presets: [
[
'@babel/env',
{
modules: false
}
],
'@babel/react'
],
plugins: [
'@babel/plugin-proposal-class-properties'
]
};

现在我的babel.config.js看起来像这样，工作正常(npm run babel-build(;

/* eslint-disable no-template-curly-in-string */
module.exports = {
presets: [
[
'@babel/env',
{
modules: false,
loose: true
}
],
'@babel/react',
[
'minify',
{
mangle: false
}
]
],
plugins: [
'@babel/plugin-proposal-class-properties',
[
'@babel/plugin-transform-runtime',
{
corejs: false
}
],
[
'transform-imports',
{
lodash: {
transform: 'lodash/${member}'
}
}
]
]
};

对于npm run build，我babel.config.js必须是：

/* eslint-disable no-template-curly-in-string */
module.exports = {
plugins:
[
[
'@babel/plugin-transform-runtime',
{
corejs: false
}
],
[
'transform-imports',
{
lodash: {
transform: 'lodash/${member}'
}
}
]
],
env: {
production: {
plugins: [
'transform-react-remove-prop-types'
]
},
test: {
presets: [
'@babel/env',
'@babel/react'
],
plugins: [
'@babel/plugin-transform-modules-commonjs'
]
},
commonJS: {
presets: [
'@babel/env',
'@babel/react'
]
},
buildES6: {
presets: [
[
'@babel/env',
{
modules: false,
loose: true
}
],
'@babel/react',
[
'minify',
{
mangle: false
}
]
],
plugins: [
'@babel/plugin-proposal-class-properties'
]
}
}
};