意料之外的通过Webpack加载Quill

Question

我试图通过Webpack在NodeJS应用程序中加载NodeJS，但遇到了以下错误：

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

这是可能的，因为奎尔提供了一个示例，但我无法使它工作。

我的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 / the的项目实例中，您不应该在src .ts文件中编译node_modules。原因:编译器选项差异/双编译只是您应该避免的开销。