Javascript - 导入模块上的webpack错误

时间:2017-04-10 07:57:15

标签: javascript module webpack ecmascript-6

我的脚本有assets/js个文件夹。我已经制作了2个脚本,就像它在该文件夹中的文档here中所示。一个处理ajax请求,另一个导入它。这是文件ajax.js

function getJSON(url, callback) {
  let xhr = new XMLHttpRequest();
  xhr.onload = function () {
    callback(this.responseText)
  };
  xhr.open('GET', url, true);
  xhr.send();
}

export function getUsefulContents(url, callback) {
  getJSON(url, data => callback(JSON.parse(data)));
}

这是app.js

import { getUsefulContents } from 'ajax';

var url = 'someUrl.com';

getUsefulContents(url, data => {
  console.log(data);
});

我安装了babel-core,babel-loader和babel-preset-es2015。 webpack.config.js设置如下:

module.exports = {
  entry: './assets/js/app.js',
  output: {
    filename: './dist/app.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
      }
    ]
  }
}

但是,我明白了:

ERROR in ./assets/js/app.js
Module not found: Error: Can't resolve 'ajax' in '/Users/myUser/Projects/Pagination/assets/js'
 @ ./assets/js/app.js 3:12-27
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./assets/js/app.js

这是我运行webpack --display-error-details命令时出现的详细错误:

ERROR in ./assets/js/app.js
Module not found: Error: Can't resolve 'ajax' in '/Users/myUser/Projects/Pagination/assets/js'
resolve 'ajax' in '/Users/myUser/Projects/Pagination/assets/js'
  Parsed request is a module
  using description file: /Users/myUser/Projects/Pagination/package.json (relative path: ./assets/js)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /Users/myUser/Projects/Pagination/package.json (relative path: ./assets/js)
    resolve as module
      /Users/myUser/Projects/node_modules doesn't exist or is not a directory
      /Users/myUser/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      /Users/myUser/Projects/Pagination/assets/js/node_modules doesn't exist or is not a directory
      /Users/myUser/Projects/Pagination/assets/node_modules doesn't exist or is not a directory
      looking for modules in /Users/myUser/Projects/Pagination/node_modules
        using description file: /Users/myUser/Projects/Pagination/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /Users/myUser/Projects/Pagination/package.json (relative path: ./node_modules)
          using description file: /Users/myUser/Projects/Pagination/package.json (relative path: ./node_modules/ajax)
            as directory
              /Users/myUser/Projects/Pagination/node_modules/ajax doesn't exist
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/myUser/Projects/Pagination/node_modules/ajax doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/myUser/Projects/Pagination/node_modules/ajax.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /Users/myUser/Projects/Pagination/node_modules/ajax.json doesn't exist

当我将导入行更改为:

import { getUsefulContents } from './ajax';

我得到了:

Uncaught SyntaxError: Unexpected token import

我做错了什么?

0 个答案:

没有答案