javascript - 赋值运算符上出现意外标记

标签 javascript webpack babeljs

尝试使用 babel/webpack 转译 javascript 在“=”符号上失败。任何可能发生这种情况的想法都将受到极大的赞赏。

import auth0 from './auth0-js'
import { AUTH_CONFIG } from './auth0-variables'


export default class AuthService
{
   auth0=new auth0.WebAuth({
      domain: AUTH_CONFIG.domain,
      clientID: AUTH_CONFIG.clientId,
      redirectUri: AUTH_CONFIG.callbackUrl,
      audience: `https://${AUTH_CONFIG.domain}/userinfo`,
      responseType: 'token id_token',
      scope: 'openid'
    })
}

因此,在上面的示例中,auth0= 部分不会使用 babel/webpack 进行转译。

最佳答案

问题不在于您的代码 - 问题在于教程对于编译所需安装的内容不够清楚。它使用 experimental class fields syntax ,浏览器尚不支持,目前需要 a Babel plugin如果您想使用它。

如果你看the .babelrc for the example code ,您可以看到他们正在使用以下预设:

"presets": [
    ["env", { "modules": false }],
    "stage-2"
],

stage-2 预设包含所有建议的 JavaScript 功能的插件,这些功能处于标准化过程的第 2 阶段或更高阶段 - 类字段位于第 3 阶段,因此它们被包含在内。

类字段使用起来相当安全,因为它们很可能在未来几年内被添加到规范中 - 也就是说,如果您不想使用实验性功能,您可以依靠标准ES2015 类语法:

export default class AuthService {
    constructor() {
       this.auth0 = new auth0.WebAuth({
            domain: AUTH_CONFIG.domain,
            clientID: AUTH_CONFIG.clientId,
            redirectUri: AUTH_CONFIG.callbackUrl,
            audience: `https://${AUTH_CONFIG.domain}/userinfo`,
            responseType: 'token id_token',
            scope: 'openid'
       });
    }
}

编辑:

值得注意的是,Babel 团队现在建议使用单独的插件而不是舞台预设 - 他们计划在 Babel 7 发布后停止发布后者。请参阅their blog post了解其背后的基本原理。

关于javascript - 赋值运算符上出现意外标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47563938/

相关文章:

javascript - 显示或隐藏 Div 并根据功能更改其图标

javascript - 键入时使用 Javascript 更新 HTML 表单

javascript - React 不渲染新组件,新的 webpack 设置

babeljs - Babel 忽略与排除选项

c# - 用户名的正则表达式?

javascript - 使用 Bower 安装 jquery.storage

css - 如何从 webpack angular2 应用程序中的 node_modules 导入 CSS

reactjs - 切换到在现有项目上创建 React 应用程序?

node.js - 使用 Webpack 和 JSX 导入 React 无法识别

javascript - 在browserify和babel下React JavaScript与ES6编译问题