Javascript 错误：“未捕获的语法错误：意外标记_Javascript_Django_Reactjs_Webpack_Django Templates

Javascript 错误：“未捕获的语法错误：意外标记

javascript django reactjs webpack

Javascript 错误：“未捕获的语法错误：意外标记,javascript,django,reactjs,webpack,django-templates,Javascript,Django,Reactjs,Webpack,Django Templates,我在下面设置Django，用webpack生成的捆绑包提供模板。我已经设置好了，就像在教程中一样。然而问题是，当我转到localhost:8000时，我会得到未捕获的语法错误：意外标记这是一个棘手的问题！一切似乎都很顺利。首先，请确保django webpack loader按预期安装。第二，您的担心似乎是正确的，我们必须告诉django在哪里查找bundle，因为默认情况下，它使用静态的\u URL+bundle\u名称，如在的文档中所建议的。尝试将publicPath添加到webpack.c

我在下面设置Django，用webpack生成的捆绑包提供模板。我已经设置好了，就像在教程中一样。然而问题是，当我转到localhost:8000时，我会得到未捕获的语法错误：意外标记这是一个棘手的问题！一切似乎都很顺利。首先，请确保django webpack loader按预期安装。第二，您的担心似乎是正确的，我们必须告诉django在哪里查找bundle，因为默认情况下，它使用静态的\u URL+bundle\u名称，如在的文档中所建议的。尝试将publicPath添加到webpack.config.js，如下所示：

我不确定它是否有效，但请告诉我它是否有用

过了一会儿，我通过向settings.py添加以下代码解决了这个问题

我还必须将STATIC_URL更改为/STATIC/

这就是它的工作原理：

Webpack生成绑定到reactapp/bundles文件夹。当Django服务器运行时，它会扫描reactapp/bundles和每次新更改后，将文件夹的内容复制到根目录djangoapp/static/文件夹，如static\u root设置所定义。之后，浏览器可以通过如下静态URL访问静态根目录中的文件：localhost:8000/STATIC/bundles/。它通常默认为localhost:8000/static/但STATICFILES\u DIRS中元组的第一个元素显式地告诉Django复制static/bundles目录中的内容。 Django然后在为页面提供服务时自动生成指向静态文件的链接。

注意：静态URL应该在前面加上/否则静态路径将附加到当前页面链接而不是根链接。例如，在/index页面上，指向静态文件的链接将是localhost:8000/index/static/。。。而不是localhost:8000/static，这将是错误的，并将导致404找不到。

不确定这是否是问题所在，但您应该将env而不是babel preset env作为中的预设写入。babelrc@MatanBobi你是对的，但这并不能解决问题，不起作用。表示只有当您在不同的域上托管捆绑包时，publicPath才有用。无论如何，我尝试用替换{%render_bundle'name%}，但仍然没有成功。同样的错误。

.
├── djangoapp
│   ├── db.sqlite3
│   ├── djangoapp
│   │   ├── __init__.py
│   │   ├── settings.py
│   │   ├── urls.py
│   │   └── wsgi.py
│   ├── manage.py
│   ├── reactapp
│   │   └── static
│   │       ├── bundles
│   │       │   └── main-fdf4c969af981093661f.js
│   │       └── js
│   │           └── index.jsx
│   ├── requirements.txt
│   ├── templates
│   │   └── index.html
│   └── webpack-stats.json
├── package.json
├── package-lock.json
└── webpack.config.js

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'webpack_loader'
]

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, "templates"), ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'bundles/',
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
    }
}

STATIC_URL = 'static/'

var path = require("path");
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');

module.exports = {
  context: __dirname,

  entry: './djangoapp/reactapp/static/js/index.jsx', 

  output: {
      path: path.resolve('./djangoapp/reactapp/static/bundles/'),
      filename: "[name]-[hash].js",
  },

  plugins: [
    new BundleTracker({filename: './djangoapp/webpack-stats.json'}),
  ],

  module: {
    rules: [
      { test: /\.js$/, use: ['babel-loader'], exclude: /node_modules/},
      { test: /\.jsx$/, use: ['babel-loader'], exclude: /node_modules/}
    ]
  },

  resolve: {
    modules: ['node_modules', 'bower_components'],
    extensions: ['.js', '.jsx']
  },


};

{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Example</title>
 </head>
 <body>
 <div id="react"></div>
 {% render_bundle 'main' %}
 </body>
</html>

{
  "presets": ["babel-preset-env", "react"]
}

output: {
  path: path.resolve('./djangoapp/reactapp/static/bundles/'),
  filename: "[name]-[hash].js",
  publicPath: "http://localhost:8080/<path to bundles>"
},

STATICFILES_DIRS = [
   ('bundles', os.path.join(BASE_DIR, 'reactapp/bundles'))
]

STATIC_ROOT = os.path.join(BASE_DIR, 'static')