模块构建失败：错误：无法找到相对于目录

的预设“transform-class-properties”我尝试在我的类中编译失败的箭头函数。模块构建失败：错误：无法找到相对于目录

我读过，我应该安装https://www.npmjs.com/package/babel-plugin-transform-class-properties

现在我得到的错误：

Module build failed: Error: Couldn't find preset "transform-class-properties" relative to directory "/home/luke/Documents/myProject"

我试图在这些帖子建议的解决方案（及其他）

Webpack + Babel: Couldn't find preset "es2015" relative to directory

Error: Couldn't find preset "es2015" relative to directory

我的当前设置如下：

/app/components/App.js

import React from 'react' 
import { Switch, Route, BrowserRouter as Router } from 'react-router-dom' 

class App extends React.Component{ 

    sayHello = name => `Hello ${name}!` 

    render(){ 
    return(
     <Router> 
     <div > 
      ... 
     </div> 
     </Router> 
    ) 
    } 
} 

export default App

/package.json

{ 
    "name": "um-web", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "start": "webpack-dev-server --open", 
    "build": "NODE_ENV='production' webpack -p" 
    }, 
    "babel": { 
    "presets": [ 
     "env", 
     "react", 
     "es2015", 
     "transform-class-properties" 
    ] 
    }, 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "^6.25.0", 
    "babel-loader": "^7.0.0", 
    "babel-plugin-transform-class-properties": "^6.24.1", 
    "babel-preset-env": "^1.6.0", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "css-loader": "^0.28.4", 
    "html-webpack-plugin": "^2.28.0", 
    "style-loader": "^0.18.2", 
    "webpack": "^2.6.1", 
    "webpack-dev-server": "^2.4.5" 
    }, 
    "dependencies": { 
    "amazon-cognito-identity-js": "^1.19.0", 
    "axios": "^0.16.2", 
    "d3": "^4.9.1", 
    "lodash": "^4.17.4", 
    "moment": "^2.18.1", 
    "prop-types": "^15.5.10", 
    "query-string": "^4.3.4", 
    "react": "^15.6.1", 
    "react-dimensions": "^1.3.0", 
    "react-dom": "^15.6.1", 
    "react-measure": "^2.0.2", 
    "react-router-dom": "^4.1.1", 
    "recharts": "^1.0.0-alpha.1", 
    "semantic-ui-react": "^0.69.0" 
    } 
}

/webpack.config.js

var path = require('path') 
var HtmlWebpackPlugin = require('html-webpack-plugin') 
var webpack = require('webpack') 

var config = { 
    entry: './app/index.js', 
    output:{ 
    path: path.resolve(__dirname, 'dist'), 
    filename: 'index_bundle.js', 
    publicPath: '/' 
    }, 
    module:{ 
    rules:[ 
     { test: /\.(js)$/, use: 'babel-loader'}, 
     { test: /\.css$/, use: ['style-loader', 'css-loader']} 
    ] 
    }, 
    devServer: { 
    historyApiFallback: true 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     template: 'app/index.html' 
    }) 
    ] 
} 

if(process.env.NODE_ENV === 'production'){ 
    config.plugins.push(
    new webpack.DefinePlugin({ 
     'process.env' : { 
     'NODE_ENV': JSON.stringify(process.env.NODE_ENV) 
     } 
    }), 
    new webpack.optimize.UglifyJsPlugin() 
) 
} 

module.exports = config

来源

2017-09-14 Luke

transform-class-properties是一个插件不是预设，所以你应该把它放在你的babel插件配置中。

下面是一个例子.babelrc

{ 
    "presets": [ 
    ["env", { 
     "targets": { 
     "browsers": ["last 2 versions", "safari >= 7"], 
     "uglify": true 
     }, 
     "modules": false 
    }], 
    "react" 
    ], 
    "plugins": [ 
    ["transform-class-properties", { "spec": true }], 
    "transform-decorators", 
    "transform-object-rest-spread", 
    "react-hot-loader/babel" 
    ] 
}

而且这个插件的解释：

https://babeljs.io/docs/plugins/transform-class-properties/

希望这有助于。

来源

2017-09-14 12:58:47

babel- 插件 -transform-class-properties是一个不是预设的插件。当您在presets下列出它时，除了文字模块名称之外，Babel将寻找带有babel-preset-前缀的模块。详情请参阅Plugin/Preset Paths。

您需要将其放在plugins之下，如Usage in the README所示。

"babel": { 
    "presets": [ 
    "env", 
    "react" 
    ], 
    "plugins": [ 
    "transform-class-properties" 
    ] 
},

我也去掉了es2015预设的，因为它有利于env其中包含一切es2015做多弃用。

来源

2017-09-14 12:58:36

模块构建失败：错误：无法找到相对于目录

回答

相关问题