typescript - 通过 Webpack 意外加载 Quill token

Question

我正在尝试加载 Quill通过 NodeJS 应用程序中的 Webpack 但遇到此错误:

ERROR in ./node_modules/parchment/src/blot/scroll.ts 17:18
Module parse failed: Unexpected token (17:18)
You may need an appropriate loader to handle this file type.
|
| class ScrollBlot extends ContainerBlot {
>   static blotName = 'scroll';
|   static defaultChild = 'block';
|   static scope = Registry.Scope.BLOCK_BLOT;
 @ ./node_modules/parchment/src/parchment.ts 6:0-39 32:10-20
 @ ./node_modules/quill/core.js
 @ ./src/modules/Quill/quill.ts
 @ ./src/routes/Node/Demo/index.tsx
 @ ./src/routes/Node/index.tsx
 @ ./src/routes/index.tsx
 @ ./src/App.tsx
 @ ./src/index.tsx

这是可能的，因为 Quill 提供了 example但我无法让它工作。

我的 webpack 配置文件的缩写版本:

module.exports = {
    ...
    resolve: {
        alias: {
          'parchment': path.resolve(__dirname, '../node_modules/parchment/src/parchment.ts'),
          'quill$': path.resolve(__dirname, '../node_modules/quill/quill.js'),
        },
        extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
    },
    rules: [
    {
        enforce: 'pre',
        test: /\.js$/,
        loader: 'source-map-loader',
        exclude: /node_modules/,
    },
    {
    test: /\.ts(x?)$/,
    use: [{
        loader: 'ts-loader',
        options: {
          compilerOptions: {
            declaration: false,
            target: 'es5',
            module: 'commonjs'
          },
          transpileOnly: true
        },
      }],
    },
    ...
};

还有一个缩写的 package.json:

"dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.5",
    "babel-preset-es2015": "^6.24.1",
    "parchment": "^1.1.4",
    "quill": "^1.3.6",
    "ts-loader": "^4.5.0"
  },
  "devDependencies": {
    "@svgr/webpack": "^4.2.0",
    "@types/quill": "^2.0.2",
    "@types/webpack": "^4.4.19",
    "@types/webpack-env": "^1.13.6",
    "tslint": "^5.11.0",
    "tslint-config-airbnb": "^5.11.1",
    "tslint-config-prettier": "^1.16.0",
    "tslint-react": "^3.6.0",
    "tsutils": "^3.5.1",
    "typescript": "^2.8.3",
    "typings-for-css-modules-loader": "^1.7.0",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "webpack": "^4.26.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.14",
    "webpack-merge": "^4.1.4"
  }
}

该错误表明 ts-loader 未编译 scroll.ts，因为它认为 static 是意外标记，但就目前而言我可以看出加载程序设置正确。

有什么想法我哪里出错了吗？

Answer 1

你有

'parchment': path.resolve(__dirname, '../node_modules/parchment/src/parchment.ts'),

相反，您应该将其解析为生成的 .js文件:

'parchment': path.resolve(__dirname, '../node_modules/parchment/dist/parchment.js'),

更多

您的项目中的 webpack/ts-loader 实例不应编译 src .ts文件位于 node_modules 。原因:编译器选项差异/双重编译只是您应该避免的开销👍