学习ReactJS: Uncaught SyntaxError:意外的令牌导入

Learning ReactJS: Uncaught SyntaxError: Unexpected token import

本文关键字：令牌 意外 导入 SyntaxError ReactJS Uncaught 学习      更新时间：2023-09-26

我是ReactJS新手。我在试试书呆子的代码。

Uncaught SyntaxError: Unexpected token import

我现在已经加载了babel两次，并按照所描述的教训进行了操作，但它就是不能加载到html页面中。代码如下:

index . html 

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>Setup</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = "main.js"></script>
   </body>
</html>

main.js 

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App2';
ReactDOM.render(<App />, document.getElementById('app'))

app2.jsx 

import React from 'react';
import ReactDom from 'react-dom';
class App extends React.Component {
  render(){
    let txt = this.props.txt
    return <h1>{txt}</h1>
  }
}
App.propTypes = {
  txt: React.PropTypes.string,
  cat: React.PropTypes.number.isRequired
}
App.defaultProps = {
  txt: 'this is the default txt'
}
ReactDOM render(
  <App cat={5}/>,
  document.getElementById('app')
)

package.json 

{
  "name": "es6-react-setup",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^0.14.3",
    "react-dom": "^0.14.3"
  },
  "devDependencies": {
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5"
  }
}

请帮。

在安装了ES6和React的Babel预设后，你需要通过创建一个.babelrc文件或在你的package.json文件中选择启用它们。

(混淆)这里的文档:http://babeljs.io/docs/usage/babelrc/

示例启用预设的package.json表项:

"babel": {
    "presets": [
        [
          "env",
          {
            "modules": false
          }
        ],
        "react"
    ]
}

import为ES6语法。你需要npm install babel-preset-es2015 babel-preset-react --save-dev来告诉babel编译你的ES6和React代码。

你可以在你的webpack.config.js文件中加载2个包:

module.exports = {
  entry: './main.js',
  output: {
    path: './',
    filename: 'index.js'
  },
  module: {
    loaders: [
      {
        test: /'.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
}
我希望它能帮助你。
相关文章：