У меня есть проект React, который я перенес с Babel 6 на 7. И теперь я сталкиваюсь с небольшой проблемой при попытке собрать мой пакет.
Я уже понял, что проблема в том, когда команды Babel
Это мой "babel" скрипт на моем package.json:
"babel-build": "cross-env NODE_ENV=buildES6 babel ./src/components/ --ignore **/stories,**/*.test.js --source-maps --out-dir ./dist/my-component/"
Это конвертирует мои файлы в папку dist. Проблема заключается в следующем: когда я пытаюсь использовать содержимое папки dist в другом реактивном проекте, кажется, что файлы не конвертированы правильно.
В моем упакованном проекте я экспортирую 3 таких компонента (мой * 1014) * file):
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: Невозможно прочитать свойство '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
My пакет. 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"
}