2016-12-10 6 views
0

私はQuillエディタを拡張するモジュールを作成してプロジェクトに統合しようとしています。Webpackを通じてノードモジュールをインポートする際にエラーが発生しました。 "このファイルタイプを処理するために適切なローダーが必要な場合があります。"

私は私のカスタムクイルモジュール内の特定のクイルモジュールをインポートしようとすると、WebPACKのは、エラーがスローされます。上の

Uncaught Error: Cannot find module "quill/core/quill" 
    at webpackMissingModule (QuillLinkTooltip.js:15) 
    at eval (QuillLinkTooltip.js:15) 

し、後で:

./~/quill/core/quill.js 
Module parse failed: /Users/path_to_my_app_folder/node_modules/quill/core/quill.js Line 1: Unexpected token 
You may need an appropriate loader to handle this file type. 
| import './polyfill'; 
| import Delta from 'quill-delta'; 
| import Editor from './editor'; 

はここでカスタムクイルモジュールからの抜粋です(QuillLinkTooltip.js)を作成してエラーをスローする:

import Quill from 'quill/core/quill'; 
import { Range } from 'quill/core/selection'; 
import Keyboard from 'quill/modules/keyboard'; 
import LinkBlot from 'quill/formats/link'; 
import Tooltip from 'quill/ui/tooltip'; 

私はWebpack、babel、babel es2015をプロジェクト内でプリセットしています。 import get from 'lodash/get';のようなものを使ってlodashなどの他のノードモジュールをインポートできます。

私はwebpackがモジュールを見つけることができると思っていますが、モジュールの解析に問題があります。私は私が右のWebPACKを設定していると思われるので、Webback、バベルとバベルES2015プリセットが必要であることに言及https://quilljs.com/guides/adding-quill-to-your-build-pipeline/を読んだ

module: { 
    loaders: [ 
     { 
      test: /.*\.js$/, 
      loader: 'babel-loader', 
      exclude: [ /node_modules/, /frontend/ ], 
      query: { 
       presets: [ 'babel-preset-es2015' ].map(require.resolve), 
       plugins: [ 'babel-plugin-add-module-exports' ].map(require.resolve) 
      } 
     }, 

:ここに私のwebpack.config.jsファイルの抜粋です。しかし、多分私は何かを欠いている?

答えて

0

これが機能するように管理しました。私のwebpack.config.jsファイルは、node_modulesをbabel-loader定義から除外していたので、Webpackは/ node_modulesに置かれたquillファイルを解決しようとしましたが、babel-loaderから除外されたので解析できません。

私の文を除外するに例外を追加することによって、それを修正:

module: { 
    loaders: [ 
     { 
      test: /.*\.js$/, 
      loader: 'babel-loader', 
      exclude: [ /node_modules(?!\/quill)/, /frontend/ ], 
      query: { 
       presets: [ 'babel-preset-es2015' ].map(require.resolve), 
       plugins: [ 'babel-plugin-add-module-exports' ].map(require.resolve) 
      } 
     }, 
関連する問題