时间戳

首页 > 解决方案 > Webpack 弄乱字符顺序导致意外令牌错误

typescript - Webpack 弄乱字符顺序导致意外令牌错误

问题描述

我知道标题不是很具有描述性，但找不到更好的词。我正在使用“xstate”库，构建结果导致“意外令牌”错误。

这是我的 webpack.config.js：

var WebpackBuildNotifierPlugin = require('webpack-build-notifier');

var webpackConfig = { 
    entry: "./src/App.tsx",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },
    plugins: [
        new WebpackBuildNotifierPlugin({
          title: "Build",
          suppressSuccess: false
        })
    ],
    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",
    mode:'development',
    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".ts", ".tsx", ".js", ".json"]
    },
    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
            { test: /\.css$/,  loader: 'style-loader!css-loader' },
            { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },
            { test: /\.(jpg|png|svg|gif|css)$/, exclude: /fabric\.css$/, loader: 'file-loader' }
        ]
    }
};


module.exports = [
    webpackConfig
];

构建代码后，bundle.js 的部分看起来像这样，导致“意外令牌”错误：

u
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../../webpack/buildin/global.js */ "./node_modules/webpack/buildin/global.js")))ndefined

Xstate 正在以这种方式导入：

import * as React from 'react';
import { Machine, interpret } from 'xstate';

interface AppRootState{
    currentState:any
}

export class AppRoot extends React.Component<{}, AppRootState>{

    service = interpret(appRootMachine).onTransition((current)=>{
        this.setState({current});
    });

    constructor(){
        super({});
        this.state = {
            currentState:this.service.initialState
        };
    }

    componentDidMount() {
        this.service.start();
    }

    componentWillUnmount() {
       this.service.stop();
    }
    ///Rest of the code
}

标签： typescriptwebpackxstate

解决方案

很难消除您可能拥有的所有设置变量，但这是我尝试过的以及在尝试复制您的问题时对我有用的方法：

我按照此处的 React 和 Webpack 设置的 typescript 指南中的说明进行操作。

一旦我达到一切正常工作的程度，我将“Hello”组件内容替换为您在问题中提供的内容，“工作”组件最终如下所示：

import * as React from 'react';
import { Machine, interpret } from 'xstate';

export interface AppRootProps {}
export interface AppRootState {
  currentState: any;
  current: any;
}

const appRootMachine = Machine({
  id: 'toggle',
  initial: 'inactive',
  states: {
    inactive: { on: { TOGGLE: 'active' } },
    active: { on: { TOGGLE: 'inactive' } }
  }
});

export class AppRoot extends React.Component<AppRootProps, AppRootState> {
  service = interpret(appRootMachine).onTransition((current) => {
    this.setState({ current });
  });

  constructor() {
    super({});
    this.state = {
      currentState: this.service.initialState,
      current: {}
    };
  }

  componentDidMount() {
    this.service.start();
  }

  componentWillUnmount() {
    this.service.stop();
  }
  render() {
    return (
      <h1>
        Current state:
        {this.state.currentState && this.state.currentState.value}
      </h1>
    );
  }
}

我从 xstate 存储库中添加了“基本”机器示例作为您appRootMachine的基本渲染方法，并试图故意使所有代码尽可能接近您的实现。

然后我用你提供的配置替换了 webpack.config.js

  • 安装了它所需的依赖项，awesome-typescript-loader&webpack-build-notifier
  • entry: "./src/index.tsx",更新了的条目webpackConfig
  • 更新 index.html 第 15 行<script src="./dist/bundle.js"></script>以使用您的 webpack 配置创建的包

在那之后一切都对我有用，我希望你在我注意到的上述步骤中找到答案，这可以帮助你修复你的项目设置。

我还将推荐@xstate/react 包，您应该考虑将来使用带有 react 的 xstate，并注意其中的使用示例，因为它们展示了比此处显示的更好的用法来解决您的问题。

推荐阅读