英文:
configuring babel.config.js on react native project
问题
I need to configure my babel.config.js to use react-native-vision-camera as:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'react-native-reanimated/plugin',
{
globals: ['__scanCodes'],
},
],
],
};
but my current configuration is as:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
'nativewind/babel',
'react-native-reanimated/plugin',
[
'module-resolver',
{
root: ['./src'],
extensions: [
'.ios.ts',
'.android.ts',
'.ts',
'.ios.tsx',
'.android.tsx',
'.tsx',
'.jsx',
'.js',
'.json',
],
alias: {
'^@src/(.+)': './src/\',
'^@assets/(.+)': './src/assets/\',
'^@components/(.+)': './src/components/\',
'^@contexts/(.+)': './src/contexts/\',
'^@models/(.+)': './src/models/\',
'^@navigation/(.+)': './src/navigation/\',
'^@screens/(.+)': './src/screens/\',
'^@services/(.+)': './src/services/\',
'^@utils/(.+)': './src/utils/\',
},
},
],
],
};
Where to put my globals?
All the configurations I have tried are not working
Thanks!
英文:
I need to configure my babel.config.js to use react-native-vision-camera as:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'react-native-reanimated/plugin',
{
globals: ['__scanCodes'],
},
],
],
};
but my current configuration is as:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
'nativewind/babel',
'react-native-reanimated/plugin',
[
'module-resolver',
{
root: ['./src'],
extensions: [
'.ios.ts',
'.android.ts',
'.ts',
'.ios.tsx',
'.android.tsx',
'.tsx',
'.jsx',
'.js',
'.json',
],
alias: {
'^@src/(.+)': './src/\',
'^@assets/(.+)': './src/assets/\',
'^@components/(.+)': './src/components/\',
'^@contexts/(.+)': './src/contexts/\',
'^@models/(.+)': './src/models/\',
'^@navigation/(.+)': './src/navigation/\',
'^@screens/(.+)': './src/screens/\',
'^@services/(.+)': './src/services/\',
'^@utils/(.+)': './src/utils/\',
},
},
],
],
};
Where to put my globals?
All the configurations I have tried are not working
Thanks!
答案1
得分: 1
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
'nativewind/babel',
['react-native-reanimated/plugin',
{
globals: ['__scanCodes'],
}
],
[
'module-resolver',
{
root: ['./src'],
extensions: [
'.ios.ts',
'.android.ts',
'.ts',
'.ios.tsx',
'.android.tsx',
'.tsx',
'.jsx',
'.js',
'.json',
],
alias: {
'^@src/(.+)': './src/\',
'^@assets/(.+)': './src/assets/\',
'^@components/(.+)': './src/components/\',
'^@contexts/(.+)': './src/contexts/\',
'^@models/(.+)': './src/models/\',
'^@navigation/(.+)': './src/navigation/\',
'^@screens/(.+)': './src/screens/\',
'^@services/(.+)': './src/services/\',
'^@utils/(.+)': './src/utils/\',
},
},
],
],
};
英文:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
'nativewind/babel',
['react-native-reanimated/plugin',
{
globals: ['__scanCodes'],
}
],
[
'module-resolver',
{
root: ['./src'],
extensions: [
'.ios.ts',
'.android.ts',
'.ts',
'.ios.tsx',
'.android.tsx',
'.tsx',
'.jsx',
'.js',
'.json',
],
alias: {
'^@src/(.+)': './src/\',
'^@assets/(.+)': './src/assets/\',
'^@components/(.+)': './src/components/\',
'^@contexts/(.+)': './src/contexts/\',
'^@models/(.+)': './src/models/\',
'^@navigation/(.+)': './src/navigation/\',
'^@screens/(.+)': './src/screens/\',
'^@services/(.+)': './src/services/\',
'^@utils/(.+)': './src/utils/\',
},
},
],
],
};
答案2
得分: 0
这个技巧是，reanimated 建议将他们的插件放在最后使用!!
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
'nativewind/babel',
[
'module-resolver',
{
root: ['./src'],
extensions: [
'.ios.ts',
'.android.ts',
'.ts',
'.ios.tsx',
'.android.tsx',
'.tsx',
'.jsx',
'.js',
'.json',
],
alias: {
'^@src/(.+)': './src/\',
'^@assets/(.+)': './src/assets/\',
'^@components/(.+)': './src/components/\',
'^@contexts/(.+)': './src/contexts/\',
'^@models/(.+)': './src/models/\',
'^@navigation/(.+)': './src/navigation/\',
'^@screens/(.+)': './src/screens/\',
'^@services/(.+)': './src/services/\',
'^@utils/(.+)': './src/utils/\',
},
},
],
[
'react-native-reanimated/plugin',
{
globals: ['__scanCodes'],
},
],
],
};
英文:
the trick is that reanimated warns to use their plugin LAST!!
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
'nativewind/babel',
[
'module-resolver',
{
root: ['./src'],
extensions: [
'.ios.ts',
'.android.ts',
'.ts',
'.ios.tsx',
'.android.tsx',
'.tsx',
'.jsx',
'.js',
'.json',
],
alias: {
'^@src/(.+)': './src/\',
'^@assets/(.+)': './src/assets/\',
'^@components/(.+)': './src/components/\',
'^@contexts/(.+)': './src/contexts/\',
'^@models/(.+)': './src/models/\',
'^@navigation/(.+)': './src/navigation/\',
'^@screens/(.+)': './src/screens/\',
'^@services/(.+)': './src/services/\',
'^@utils/(.+)': './src/utils/\',
},
},
],
[
'react-native-reanimated/plugin',
{
globals: ['__scanCodes'],
},
],
],
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论