webpack nhập khẩu chỉ có giá trị biến

Question

Tôi biên dịch mã mà cần giá trị phiên bản từ package.json:

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

và khi tôi nhìn vào các tập tin .js rằng WebPack đầu ra tôi nhìn thấy toàn bộ package.json đó!

Làm cách nào để tránh điều này?

thiết lập của tôi là:

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 
    }), 
] 

phiên bản webpack của tôi là 3.8.1

Answer 1

Những gì tôi thường làm là tận dụng lợi thế của 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 
    }), 
] 

Bây giờ trong mã của bạn tất cả những gì bạn phải làm là sử dụng process.env.VERSION và bạn sẽ xuất phiên bản gói của mình.

Hy vọng điều này đã giúp

Answer 2

Modern webpack các phiên bản hỗ trợ Tree shaking (https://webpack.js.org/guides/tree-shaking/), nhưng nó chỉ hoạt động nếu chỉ xuất khẩu được cấu hình bởi chương trình đặc biệt, bao gồm độc lập mang tên nhập khẩu cho mỗi thực thể. Trong trường hợp đó, webpack có thể thực hiện phân tích biểu đồ phụ thuộc và chỉ bao gồm các thực thể bắt buộc. Ngoài ra, chỉ thị nhập khẩu không hỗ trợ hủy - đó là cú pháp duy nhất để nhập tên, vì vậy đối tượng JS lớn sẽ luôn được nhập theo kiểu nguyên khối.

Nhập dưới dạng giá trị không có sẵn theo định nghĩa, vì webpack chỉ thực hiện gói cho tập hợp các tệp có mã nguồn và có thể là các phụ thuộc tài nguyên tùy chỉnh. Nhập khẩu thực trong các mô-đun ES6, mà hiện nay đã được hỗ trợ trên hầu hết các nền tảng, cũng không cung cấp các giá trị nhập khẩu - thay vào đó là ràng buộc. https://ponyfoo.com/articles/es6-modules-in-depth#bindings-not-values.

Tất nhiên, vấn đề ban đầu có thể được giải quyết bằng cách gói webpack replace hoặc alias plugin. Chỉ cần lưu trữ version trong một số tệp độc lập hoặc chuỗi không đổi và thay thế nó do gói. Giải pháp đơn giản nhất là

import version from 'PACKAGE_VERSION' 

và sau đó cấu hình external với callback https://webpack.js.org/configuration/externals/ như thế

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