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插件之後。交換這些輪，它應該工作。