Question

我正在设置凤凰服务器，我打算在前端使用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行：意外的标记您可能需要适当的加载程序来处理此文件类型。 |从'react'中导入React;

我的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"]
}

导入时出错？

1 个答案:

.babelrc