問題描述
Babel 7 不能正確轉換 index.js (Babel 7 don't convert index.js properly)
我有一個從 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;
而瀏覽器說：
TypeError: Cannot read property 'getRandomArbitrary' of undefined
我認為我轉換後的 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'
]
}
}
};
有人可以幫我解決它嗎？有什麼問題？
<
參考解法
方法 1:
I already figured out. I should change my index.js to this:
import FancyButton from './FancyPanel/FancyButton';
import MathUtils from './FancyPanel/MathUtils';
import SumPanel from './FancyPanel/SumPanel';
export { FancyButton, MathUtils, SumPanel };
I tried many babel.config.js modifications and at the end I only have this:
/* 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'
]
};
But with @nicolo‑ribaudo help at https://github.com/babel/babel/issues/11107 I figured out that @babel/plugin‑transform‑modules‑commonjs plugin shouldn't be declared and @babel/env preset must have modules: false, like this:
/* eslint‑disable no‑template‑curly‑in‑string */
module.exports = {
presets: [
[
'@babel/env',
{
modules: false
}
],
'@babel/react'
],
plugins: [
'@babel/plugin‑proposal‑class‑properties'
]
};
Now my babel.config.js looks like this and works just fine (for 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}'
}
}
]
]
};
For npm run build my babel.config.js must be:
/* 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'
]
}
}
};