Webpack：如何在构建时转换变量

Question

关于使用Vue （vue-loader） + Webpack和Chromatism

示例:(在开发/源代码上）

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

是否有可能告诉Webpack在构建版本上转换为rgb(0,0,0) ？

因此， 构建版本应该转换为:(用于性能 ）

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

Answer 1

正如之前的答案和评论已经提到过，没有现成的AOT编译器可以处理这种情况（我的意思是这是一个非常具体的案例，没有通用工具能够处理它），没有什么可以阻止你从推出自己的加载器/插件来处理这个任务！
您可以使用自定义Webpack Loader和Node的VM Module在构建时执行代码，获取其输出并将其替换为源文件中的函数调用。
此想法的示例实现可能类似于以下代码段：

// 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;
}

然后在你的production.webpack.js （或类似的文件）中取自这个问题 ：

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

注意：这只是一个参考实现，并且很大程度上是不完整的。 这里使用的正则表达式是非常基本的，可能不包括许多其他用例，因此请确保更新正则表达式。 此外，整个内容可以使用webpack插件实现（只是我没有足够的知识来创建一个）。 有关快速入门的信息， 请参阅此Wiki以了解如何创建自定义插件。

基本思路很简单。

1. 首先创建一个沙盒环境，
   let sandbox = { chromatism:chromatism, ...}

2. 然后创建一个执行上下文，
   let context = new vm.createContext(sandbox)

3. 然后，对于每个有效源，在上下文中执行source语句并获取结果。
   let result = (new (vm.Source)(source)).runInContext(context)

4. 然后可以用结果替换原始源语句。

Answer 2

尝试使用回调加载程序来处理所有JavaScript。 为这个特定情况定义一个回调函数，甚至是更通用的evalDuringCompile: function(code) { return JSON.stringify(eval(code)); } ： evalDuringCompile: function(code) { return JSON.stringify(eval(code)); } evalDuringCompile: function(code) { return JSON.stringify(eval(code)); }

Answer 3

State of Art优化器无法处理任意表达式。 在这种情况下，最可靠的解决方案是像这样的代码中的硬代码常量。

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

一些未来的优化器确实处理这样的情况。 prepack将在编译时评估代码并输出计算值。 但是，通常不认为生产准备就绪。