Webpack/ES6プロジェクト設定が混乱する

Question

私は最初のES6とwebpack "アプリケーション"をセットアップしようとしていて、クラスとモジュールを使いたいと思っています。しかし、毎回私は次のエラーを取得するwebpackコマンドを介してアプリケーションをtranspileたい：

$ webpack 
Hash: c91db5651ec9123b8959 
Version: webpack 3.5.6 
Time: 2319ms 
    Asset  Size Chunks     Chunk Names 
app.bundle.js  354 kB  0 [emitted] [big] main 
    index.html 978 bytes   [emitted] 
    [0] ./src/app.js 14 kB {0} [built] 
    + 1 hidden module 

ERROR in ./src/app.js 
Module not found: Error: Can't resolve 'radar' in 'C:\dev\git\my-first-app\src' 
@ ./src/app.js 7:13-29 
Child html-webpack-plugin for "index.html": 
    1 asset 
     [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 1.37 kB {0} [built] 
     [2] (webpack)/buildin/global.js 509 bytes {0} [built] 
     [3] (webpack)/buildin/module.js 517 bytes {0} [built] 
     + 1 hidden module 

私は、次のファイルに

package.json

{ 
    "name": "my-first-app", 
    "version": "1.0.0", 
    "description": "", 
    "main": "webpack.config.js", 
    "scripts": { 
    "build": "./node_modules/.bin/babel src -d dest", 
    "start": "webpack-dev-server" 
    } 
    "devDependencies": { 
    "babel-cli": "^6.26.0", 
    "babel-core": "^6.26.0", 
    "babel-loader": "^7.1.2", 
    "babel-preset-env": "^1.6.0", 
    "babel-preset-es2015": "^6.24.1", 
    "webpack": "^3.5.6" 
    }, 
    "dependencies": { 
    "babel-polyfill": "^6.26.0", 
    "d3": "3.5.17", 
    "html-webpack-plugin": "^2.28.0", 
    "webpack-dev-server": "^2.4.5" 
    } 
} 

webpack.config.jsを持っている

const path = require('path'); 
const webpack = require('webpack'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    entry: './src/app.js', 
    output: { 
     path: path.resolve(__dirname, 'dest'), 
     filename: 'app.bundle.js' 
    }, 
    module: { 
     loaders: [ 
      { 
       loader: 'babel-loader', 
       include: [ 
        path.resolve(__dirname, "src") 
       ], 
       test: /\.js$/ 
      } 
     ] 
    }, 
    plugins: [ 
     new HtmlWebpackPlugin({ 
      template: 'src/index.html', 
      filename: 'index.html', 
      inject: 'body' 
     }) 
    ] 
}; 

src/app.js

'use strict'; 

import * as d3 from 'd3'; 
import radar from 'radar'; 

var r = new radar(); 
r.render(); 

radar.js

'use strict'; 

import * as d3 from 'd3'; 

export default class radar { 
    render() { ... } 
} 

index.htmlには、頭と体とちょうど空のドキュメントが含まれているいくつかの基本的なHTMLファイルです。

私のエラーはwebpack.config.jsのどこかにあると思います。あるいは、ES6を使用するために別のテクニックを混ぜていると思います。また、コマンドnpm buildは役に立ちません（何も起こらないようです）。 誰かが私を助けることができますか？私はちょっと混乱していて、探す/探すのはわからない...

Answer 1

radarはapp.jsからインポートされていますが、package.json依存リストにはありません。あなたは、レーダーは、ローカルファイルではなく、パッケージである場合、あなたはそれをインポートするファイルのパスを使用する必要がありますあなたのpackage.json

---

でパッケージをインストールして、参照を保存するには、コマンドラインからnpm install radar --saveを実行することができます 。以下のように： - https://webpack.js.org/concepts/module-resolution/