关于webpack2的tree shaking功能。。

Question

package.jso如下

  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-preset-env": "^1.3.3",
    "css-loader": "^0.28.0",
    "file-loader": "^0.11.1",
    "style-loader": "^0.16.1",
    "webpack": "^2.3.3"
  }

假如有个a.js文件:

export function foo() {
    console.log('需要忽略的');
}

export function bar() {
    console.log('被引入的');
}

然后在入口文件entry.js引入bar

import { bar } from './a.js';
bar();

此时如果要压缩时忽略foo，就需要tree shaking功能，webpack2默认支持tree shaking，但是Babel里的transform-es2015-modules-commonjs会导致tree shaking无效。

所以需要加上"modules":false，比如我的.babelrc配置是这样的：

{ "presets": [ ["env", { "targets": { "browsers": ["last 2 versions", "ie >= 8"] },"modules":false } ] ]}

这样直接使用webpack编译是没问题的，但是如果使用babel-node去运行entry.js就会报错说不支持import，应该是modules:false把babel-preset-env也灭了?

所以怎样能既开启tree shaking功能又不影响babel-node直接运行entry.js里的import呢？

Answer 1

我的.babelrc配置,可以工作

{
  "presets": [
    ["env", {
      "loose": true,
      "modules": false
    }]
  ]
}

Answer 2

babel-node 本身并不含有 tree-shaking 的功能，这个是 webpack 提供的。所以你运行webpack是成功的。