javascript - Webpack 如何处理混搭模块语法

Question

如果我使用 webpack，我可以使用 CommonJS 模块语法创建一个程序

#File: src-client/entry-point.js
helloWorld1 = require('./hello-world');    
alert(helloWorld1.getMessage());

#File: src-client/hello-world.js
var toExport = {};
toExport.getMessage = function(){
    return 'Hello Webpack';
}
module.exports = toExport;

我还可以使用 ES6/ES2015 模块语法创建程序。

#File: src-client/entry-point.js 
import * as helloWorld2 from './hello-world2';    
alert(helloWorld2.getMessage());

#File: src-client/hello-world2.js
var getMessage = function(){
    return 'Hello ES2015';
};
export {getMessage};

以上两个程序都可以毫无问题地编译和运行(在浏览器中)。但是，如果我尝试混合和匹配语法

#File: src-client/entry-point.js
helloWorld1 = require('./hello-world');
import * as helloWorld2 from './hello-world2';
alert(helloWorld1.getMessage());
alert(helloWorld2.getMessage());

Webpack 本身会愉快地编译程序

$ ./node_modules/webpack/bin/webpack.js src-client/entry-point.js pub/bundle.js 
Hash: 1ce72fd037a8461e0509
Version: webpack 2.5.1
Time: 72ms
    Asset     Size  Chunks             Chunk Names
bundle.js  3.45 kB       0  [emitted]  main
   [0] ./src-client/hello-world.js 110 bytes {0} [built]
   [1] ./src-client/hello-world2.js 80 bytes {0} [built]
   [2] ./src-client/entry-point.js 155 bytes {0} [built]

但是当我在浏览器中运行该程序时，出现以下错误

Uncaught ReferenceError: helloWorld1 is not defined
    at Object.<anonymous> (bundle.js:101)
    at __webpack_require__ (bundle.js:20)
    at toExport (bundle.js:66)
    at bundle.js:69

我没想到这会起作用(我不是怪物)，但它确实提出了一个问题，即到底发生了什么。

当 webpack 遇到像这样的冲突模块语法时——会发生什么？ import 关键字是否会使 webpack 进入“解析 ES2015”模式？有没有办法强制 webpack 将某些文件视为 ES2015 而将其他文件视为 CommonJS？即有没有办法让 webpack 无缝地处理一个使用多种标准的模块的项目？还是普遍认为您不应该这样做？

Answer 1

import 的存在自动将模块放入 strict mode ，如 Spec 中所定义.在严格模式下，您不允许使用 undefined variable ，而在常规模式下，该变量将隐式成为全局变量。您尝试将 require 的结果分配给之前未定义的 helloWorld1。您需要声明该变量:

const helloWorld1 = require('./hello-world');

除了 const，您还可以使用 let 或 var。