webpack的import ，require小问题

Question

我在学习使用webpack。
npm install jquery之后，
在入口js第一行输入

var $ = require("jquery");

结果正确

改成以下代码后

import $ from "jquery";

于是在这一行出错。

ERROR in ./main.js
Module parse failed: /Users/Idministrator/Programming/WebPack/hello/main.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import $ from "jquery";

webpack.config.js中，已经在resolve中通过root参数将node_modules设置成了搜索目录。

另外还想问，require("jquery")就是导入jquery吧。使用script来直接导入jquery后，就直接能使用$了，为什么这里要

var $ = require("jquery");

这没有重复定义$了嘛？还是说是存在作用域之类的问题。
希望能不吝赐教，谢谢～

---

webpack.config.js

module.exports = {
    entry: "./main",
    output:{
        path:"./build" ,
        filename:"./[name].bundle.js"
    },
    resolve:{
        root: [process.cwd() + '/src', process.cwd() + '/node_modules'],
        alias: {},
        extensions: ["",".js"]
    },
    module:{
        loaders:[
            { test: /\.less$/, loader: "style-loader!css-loader!less-loader"},
            { test: /\.css$/, loader: "style-loader!css-loader"},
            { test:/\.(png|jpg)$/, loader: "url-loader?limit=8192"}
        ]
    }
}

Answer 1

首先，报错信息里：

Module parse failed: /Users/Idministrator/Programming/WebPack/hello/main.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.

这说的是 Unexpected token，语法错误。考虑到 import 是 ECMAScript 6 的东西，如果你想用 ECMAScript 6 的 import 语法的话，你需要打开 WebPack 相应的支持，参考这篇文章： http://www.2ality.com/2015/04/webpack-es6.html 。

其次，为什么要手动给 $ 赋值呢？我们可以来看一下 jQuery 的这部分源代码：

(function( global, factory ) {

    if ( typeof module === "object" && typeof module.exports === "object" ) {
        // For CommonJS and CommonJS-like environments where a proper `window`
        // is present, execute the factory and get jQuery.
        // For environments that do not have a `window` with a `document`
        // (such as Node.js), expose a factory as module.exports.
        // This accentuates the need for the creation of a real `window`.
        // e.g. var jQuery = require("jquery")(window);
        // See ticket #14549 for more info.
        module.exports = global.document ?
            factory( global, true ) :
            function( w ) {
                if ( !w.document ) {
                    throw new Error( "jQuery requires a window with a document" );
                }
                return factory( w );
            };
    } else {
        factory( global );
    }

// Pass this if window is not defined yet
}(typeof window !== "undefined" ? window : this, function( window, noGlobal ) {

如果这是一个 CommonJS 及类似环境，而且 global 里有 document，那么他会将 jQuery 对象返回进 module.exports，并且这时候 noGlobal == true，也就是不会往 global 里注入 jQuery。

Answer 2

import时路径对吗，import是es6的语法，require是commonjs

Answer 3

这里用webpack，实际是用node编译
于是require 是node 的require，从node module中加载jquery 的module，然后module应该是将jquery.js文件指定为输出
如果用import，你需要在webpack.config的resolve里指定到jquery.js文件
我没npm jquery过 ，所以我react的写一下：

var path = require('path');
var node_modules = path.resolve(__dirname, 'node_modules');
var pathToReact = path.resolve(node_modules, 'react/dist/react.js');
var config = {
    resolve: {
        alias: {
           'react': pathToReact,
        }
    },
    //其他略
};

注意我指定到了react目录下的js文件

至于第二个问题，暂时不知道。回再去看。趴。

Answer 4

你要引入babel的loader，否则es6语法不认

Answer 5

使用babel-loader来加载js即可
参考 http://webpack.github.io/docs...