javascript - 令人困惑的 webpack/ES6 项目设置

Question

我正在尝试设置我的第一个 ES6 和 webpack“应用程序”，并且想要使用类和模块。但每次我想通过 webpack 命令转译应用程序时，我都会收到以下错误:

$ 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();

雷达.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 依赖项列表中。您可以从命令行运行 npm installradar --save 来安装软件包并将引用保存在 package.json

<小时/>

如果雷达是本地文件，而不是包，则需要使用文件路径来导入它。喜欢:

import radar from './path/to/file/radar';

以下是 Webpack 中导入语句的解析方式 - https://webpack.js.org/concepts/module-resolution/