Webpack: Làm thế nào để chuyển đổi biến trên build

Question

Về sử dụng Vue(vue-loader) + Webpack và Chromatism

Ví dụ: (trên dev/source)

let textColor = chromatism.contrastRatio('#ffea00').cssrgb // => rgb(0,0,0) 

Có thể yêu cầu Webpack chuyển đổi thành rgb(0,0,0) trên xây dựng phiên bản?

Vì vậy, trên xây dựng phiên bản nên được chuyển đổi một cái gì đó như: (ví hiệu suất)

let textColor = 'rgb(0,0,0)' 

Answer 1

Như những câu trả lời trước đây và đã nhận xét rằng không có sẵn trình biên dịch AOT sẵn có để xử lý loại tình huống này (ý tôi là đây là trường hợp rất cụ thể và không có công cụ có mục đích chung nào có thể xử lý nó), không có gì ngăn bạn từ việc tung ra trình tải/plugin của riêng bạn để xử lý tác vụ này!
Bạn có thể sử dụng Webpack Loader và Node's VM Module tùy chỉnh để thực thi mã khi chạy, nhận đầu ra và thay thế bằng lệnh gọi hàm trong tệp nguồn của bạn.
Một thi mẫu của ý tưởng này có thể trông giống như đoạn mã sau:

// file: chromatismOptimizer.js 

// node's vm module https://nodejs.org/api/vm.html 
const vm = require('vm') 

const chromatism = require('chromatism') 

// a basic and largley incomplete regex to extract lines where chromatism is called 
let regex = /^(.*)(chromatism\S*)(.*)$/ 

// create a Sandbox 
//https://nodejs.org/api/vm.html#vm_what_does_it_mean_to_contextify_an_object 
// this is roughly equivalent to the global the context the script will execute in 
let sandbox = { 
    chromatism: chromatism 
} 

// now create an execution context for the script 
let context = new vm.createContext(sandbox) 

// export a webpack sync loader function 
module.exports = function chromatismOptimizer(source){ 
    let compiled = source.split('\n').reduce((agg, line) => { 
    let parsed = line.replace(regex, (ig, x, source, z) => { 
     // parse and execute the script inside the context 
     // return value is the result of execution 
     // https://nodejs.org/api/vm.html#vm_script_runincontext_contextifiedsandbox_options 
     let res = (new (vm.Script)(source)).runInContext(context) 
     return `${x}'${res}'${z? z : ''}` 
    }) 
    agg.push(parsed) 
    return agg; 
    }, []).join('\n'); 

    return compiled; 
} 

Sau đó, trong production.webpack.js bạn (hoặc somefile như thế) lấy từ this issue:

// Webpack config 
resolveLoader: { 
    alias: { 
    'chromatism-optimizer': path.join(__dirname, './scripts/chromatism-optimizer'), 
    }, 
} 
// In module.rules 
{ 
    test: /\.js$/, 
    use: ['chromatism-optimizer'], 
} 

LƯU Ý: Đây chỉ là thực hiện tham chiếu và phần lớn không hoàn chỉnh. Regex được sử dụng ở đây khá cơ bản và có thể không bao gồm nhiều trường hợp sử dụng khác, vì vậy hãy đảm bảo bạn cập nhật regex. Ngoài ra, toàn bộ nội dung này có thể được triển khai bằng cách sử dụng plugin webpack (chỉ là tôi không có đủ kiến ​​thức về cách tạo một plugin). Để khởi động nhanh refer to this wiki để tìm hiểu cách tạo plugin tùy chỉnh.

Ý tưởng cơ bản rất đơn giản.

1. Đầu tiên tạo ra một môi trường sandbox,
   let sandbox = { chromatism:chromatism, ...}

2. Sau đó tạo một bối cảnh thực hiện,
   let context = new vm.createContext(sandbox)

3. Sau đó cho từng nguồn hợp lệ, thực hiện báo cáo nguồn trong bối cảnh và nhận được kết quả. let result = (new (vm.Source)(source)).runInContext(context)

4. Sau đó, có thể thay thế tuyên bố nguồn gốc với kết quả.

Answer 2

State of Art ưu không thể xử lý biểu hiện độc đoán. Trong trường hợp này, giải pháp đáng tin cậy nhất là mã cứng liên tục trong mã của bạn như thế này.

let textColor = process.env.NODE_ENV === 'production' ? 'rgb(0,0,0)' : chromatism.contrastRatio('#ffea00').cssrgb; 

Một số trình tối ưu hóa tương lai xử lý tình huống như thế này. prepack sẽ đánh giá mã tại thời gian biên dịch và giá trị tính toán đầu ra. Tuy nhiên, nó thường không được coi là sản xuất đã sẵn sàng.

Answer 3

Hãy thử sử dụng call-back trình tải để xử lý tất cả JavaScript của bạn. Xác định chức năng gọi lại cho trường hợp cụ thể này hoặc thậm chí là một cái gì đó tổng quát hơn như: evalDuringCompile: function(code) { return JSON.stringify(eval(code)); }