导入错误？

Question

我正在设置一个 phoenix 服务器，并计划在前端使用 React。

我在尝试导入 React 时遇到了 webpack 无法编译 js 的问题。

这是我得到的错误，我希望你们能帮助我。

./web/static/js/app.js 中的错误 模块解析失败：/home/steelo/node_modules/babel-loader/index.js!/home/steelo/node_modules/eslint-loader/index.js!/home/steelo/web/static/js/app.js 第1行： 意外的标记 您可能需要适当的加载程序来处理此文件类型。 |从“反应”导入反应；

我的 package.json 看起来像这样

{
  "name": "steelo",
  "version": "0.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {},
  "author": "",
  "dependencies": {
    "brunch": "^1.8.5",
    "babel-brunch": "^5.1.1",
    "sass-brunch": "~1.9.1",
    "clean-css-brunch": ">= 1.0 < 1.8",
    "css-brunch": ">= 1.0 < 1.8",
    "javascript-brunch": ">= 1.0 < 1.8",
    "uglify-js-brunch": ">= 1.0 < 1.8",
    "eslint-plugin-react": "~3.8.0",
    "react": "~0.14.2",
    "react-dom": "~0.14.2",
    "rx-dom": "~7.0.3",
    "rx": "~4.0.6"
  },
  "devDependencies": {
    "webpack": "~1.12.3",
    "babel": "~6.0.15",
    "babel-loader": "~6.1.0",
    "babel-core": "~6.1.2",
    "babel-eslint": "~4.1.4",
    "eslint": "~1.9.0",
    "eslint-loader": "~1.1.1",
    "node-sass": "~3.4.1",
    "style-loader": "~0.13.0",
    "postcss-loader": "~0.7.0",
    "css-loader": "~0.22.0",
    "sass-loader": "~3.1.1",
    "autoprefixer": "~6.1.0"
  }
}

而我的 webpack.config.js 看起来像这样

var autoprefixer = require('autoprefixer');
var webpack = require('webpack');

module.exports = {
    entry: "./web/static/js/app.js",
    output: {
        path: "./priv/static/js",
        filename: "app.js"
    },
    eslint: {
        configFile: '.eslintrc'
    },
    module: {
        preLoaders: [
            {test: /\.js$/, loader: 'eslint-loader', exclude: [/node_modules/, /web\/static\/vendor/]}
        ],
        loaders: [
            {test: /\.js$/, exclude: [/node_modules/, /web\/static\/vendor/], loader: 'babel-loader'},
            {test: /\.scss$/, loader: 'style!css!sass!postcss-loader'}
        ]
    },
    postcss: [ autoprefixer({ browsers: ['last 2 version'] }) ]
};

Answer 1

要在 Babel 6 中使用 ES2015 和 React，您需要安装 es2015 和 react 预设：

npm install --save-dev babel-preset-es2015 babel-preset-react

然后配置 babel 使用它们。在您的项目根目录中创建一个.babelrc，使用以下内容：

.babelrc

{
  "presets": ["es2015", "react"]
}