Webpack仅导入变量值

Question

我正在编译需要从package.json获取版本值的代码：

import {version} from '../package.json';
export default {version};

当我查看Webpack输出的.js文件时，我会看到整个package.json文件！

我该如何避免这种情况？

我的设置是：

plugins: [
    new webpack.DefinePlugin({
        'process.env.NODE_ENV': '"production"'
    }),
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    }),
    new CompressionPlugin({
        asset: '[path].gz[query]',
        algorithm: 'gzip',
        test: /\.(js|css)$/,
        threshold: 10240,
        minRatio: 0.8
    }),
]

我的webpack版本是3.8.1

- Rikard

---

这是因为 ES6 解构不能与 JSON 文件一起使用。如果您使用 JavaScript 文件并使用导出解构，则可以正常工作。 - Debabrata Mohanta

Answer 1

我通常做的是利用DefinePlugin。

// webpack.config.js
// getting the version
const package = require("./package.json");
const version = package.version;

plugins: [
    new webpack.DefinePlugin({
        'process.env.NODE_ENV': '"production"',
        'process.env.VERSION': version,
    }),
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    }),
    new CompressionPlugin({
        asset: '[path].gz[query]',
        algorithm: 'gzip',
        test: /\.(js|css)$/,
        threshold: 10240,
        minRatio: 0.8
    }),
]

现在在您的代码中，您只需要使用process.env.VERSION，它将输出您的软件包版本。希望这有所帮助。

- João Cunha

Answer 2

现代的webpack版本支持Tree shaking (https://webpack.js.org/guides/tree-shaking/)，但是它只有在特殊方案下才能配置导出指令，包括为每个实体单独命名的独立导入。在这种情况下，webpack可以分析依赖关系图并仅包含所需的实体。 此外，导入指令不支持解构-它只是用于命名导入的语法，因此大型JS对象将始终以整体方式导入。

按值导入在定义上不可用，因为webpack仅对具有源代码和可能的自定义资源依赖项的一组文件进行捆绑。ES6模块中的实际导入，在大多数平台上已经得到了支持，也不提供值导入-而是绑定。https://ponyfoo.com/articles/es6-modules-in-depth#bindings-not-values。

当然，可以通过webpack replace或alias插件来解决原始问题。只需将version存储在某个独立文件或字符串常量中，并由捆绑替换即可。最直接的解决方案是：

import version from 'PACKAGE_VERSION'

然后配置external，并使用回调函数https://webpack.js.org/configuration/externals/，如下所示：

externals: [
  function(context, request, callback) {
    if (request === 'PACKAGE_VERSION'){
      return callback(null, 'exports.default = ' + JSON.stringify(JSON.parse(fs.readFileSync('package.json')).version));
    }
    callback();
  }
],

- Vladislav Ihost