RollupJS插件没有解决

Question

我怀疑我的问题在于我的文件树的结构，但我没有太多的控制权，因为我在使用WordPress主题。

我的rollup.config.js有几个插件选项无法使用。我改变了导入语句的顺序，插件顺序，改变路径，但结果是一样的，尽管配置文件本身似乎被处理。

我通过shell脚本从mytheme/assets/js运行> rollup -c。这是因为我们可以为每个主题单独构建，同时共享一个共同的node_modules。如果这是一个愚蠢的做法，请给我上学。

我在遇到几个问题时遇到了问题。

1. node_modules应该被默认忽略，但我看到皮棉误差为node_modules\babel-polyfill\dist\polyfill.js和node_modules\debug\src\browser.js。我试图明确排除node_modules/**和eslint()条目rollup.config.js中的文件名本身，但它没有区别。

   path\to\node_modules\babel-polyfill\dist\polyfill.js 
   3:568 error 'exports' is defined but never used no-unused-vars 
   ... 
   

2. 的replace插件未更换ENV常数main.es6.js：

   5:6 error 'ENV' is not defined  no-undef 
   

这里是我的文件树：

. 
├── .babelrc 
├── .eslintrc 
├── .gitignore 
├── package.json 
├── package-lock.json 
├── node_modules/ 
├── web/ 
    ├── wp-content/ 
     ├── themes/ 
      ├── mytheme 
       ├── assets 
        ├── js 
         ├── rollup.config.js 
         ├── build/ 
          ├── main.js (build file) 
         ├── src 
          ├── main.es6.js (input file) 

这是我的shell脚本，只要修改了*.es6.js文件就会运行。

#!/bin/sh 

server="$1/web/wp-content" 

target_paths="$server/lib $server/themes $server/plugins" 
child_path="/*/assets/js/rollup.config.js" 

js_dirs=$(/bin/find $target_paths -type f -path $child_path) 

echo "paths: $target_paths" 
echo "config_files: $js_dirs" 

for js_dir in $js_dirs 
    do 
     # parent directory (assets/js) 
     js_dir=$(dirname "$js_dir") 

     # location of main.es6.js (assets/js/src) 
     src_dir="$js_dir/src" 

     # output directory (assets/js/build) 
     build_dir="$js_dir/build" 

     echo "" 
     # cd $js_dir && rollup -c 
     cd $js_dir && NODE_ENV=production rollup -c 
    done 

这里是main.es6.js

'use strict'; 
import 'babel-polyfill/dist/polyfill'; 
import debug from 'debug'; 

if (ENV !== 'production') { 
    debug.enable('*'); 
    const log = debug('app:log'); 
    log('Debug logging enabled.'); 
} else { 
    debug.disable(); 
} 

第几行这里是我的rollup.config.js

import babel from 'rollup-plugin-babel'; 
import eslint from 'rollup-plugin-eslint'; 
import resolve from 'rollup-plugin-node-resolve'; 
import commonjs from 'rollup-plugin-commonjs'; 
import replace from 'rollup-plugin-replace'; 
import uglify from 'rollup-plugin-uglify'; 

export default { 
    entry: 'src/main.es6.js', 
    format: 'iife', 
    dest: 'build/main.js', 
    sourceMap: 'inline', 
    plugins: [ 
    resolve({ 
     jsnext: true, 
     main: true, 
     browser: true 
    }), 
    commonjs(), // to play nice with require(), which is not ES6+ 
    eslint(), 
    babel({ 
     exclude: ['**/assets/js', 'node_modules/**'] 
    }), 
    replace({ 
     exclude: 'node_modules/**', 
     ENV: JSON.stringify(process.env.NODE_ENV || 'dev') 
    }), 
    uglify() 
    //(process.env.NODE_ENV === 'production' && uglify()) 
    ], 
    onwarn: function (warning) { 

    if (warning.code === 'THIS_IS_UNDEFINED') { 
     return; 
    } 

    if (warning.indexOf("The 'this' keyword is equivalent to 'undefined'") > -1) { 
     return; 
    } 

    // console.warn everything else 
    console.warn(warning.message); 
    } 
} 

下面的内容是我.eslintrc

{ 
    "env": { 
    "browser": true, 
    "es6": true 
    }, 
    "globals": { 
    "jQuery": true, 
    "$": true 
    }, 
    "extends": "eslint:recommended", 
    "parserOptions": { 
    "sourceType": "module" 
    }, 
    "rules": { 
    "indent": [ 1, 2 ], 
    "quotes": [ 0, "single" ], 
    "linebreak-style": [ 0, "windows" ], 
    "semi": [ 0, "always" ] 
    } 
} 

这是我.babelrc

{ 
    "presets": [ 
    [ 
     "env", 
     { 
     "modules": false, 
     "targets": { 
      "browsers": ["last 2 versions", "ie > 10"] 
     }, 
     "useBuiltIns": true 
     } 
    ] 
    ], 
    "plugins": [ 
    "external-helpers" 
    ] 
} 

Answer 1

路径都解决了相对于配置文件，所以node_modules（当它出现在exclude选项等）是指web/wp-content/themes/my-theme/assets/js/node_modules - 这当然不是你想要的。

你可以明确地解决node_modules是这样的...

eslint({ 
    exclude: [`${path.resolve('node_modules')}/**`] 
}) 

...但更好的方法是将有一个rollup.config。在项目的根JS文件，并运行该构建，如下所示：

// rollup.config.js in project root 
var themes = fs.readdirSync('web/wp-content/themes'); 

var configs = themes.map(theme => { 
    return { 
    entry: `web/wp-content/themes/${theme}/assets/js/src/main.es6.js`, 
    format: 'iife', 
    dest: 'web/wp-content/themes/${theme}/assets/js/build/main.js', 
    // ... 
    }; 
}); 

export default configs; 

（注意，这需要汇总0.43，这允许一个配置文件导出的configs的阵列。）

的'ENV' is not defined错误发生是因为replace插件位于eslint插件之后。交换这些轮，它应该工作。