RollupJS插件未解析

Question

我怀疑我的问题在于我的文件树的结构方式，但我对此没有太多的控制，因为我正在处理一个WordPress主题。

在我的rollup.config.js中有几个插件选项不起作用。我已经更改了导入语句的顺序、插件顺序、更改路径，但是结果是相同的，尽管配置文件本身似乎已经被处理了。

我正在通过一个shell脚本从mytheme/assets/js运行mytheme/assets/js。这样我们就可以为每个主题创建单独的构建，同时共享一个公共的node_modules。如果这是一种愚蠢的方法，请教我。

我在脱皮的时候遇到了几个问题。

1. 默认情况下，node_modules应该被忽略，但是我看到了node_modules\babel-polyfill\dist\polyfill.js和node_modules\debug\src\browser.js的lint错误。我试图在node_modules/**中的eslint()条目中显式地排除rollup.config.js和文件名本身，但这并没有什么区别。 path\to\node_modules\babel-polyfill\dist\polyfill.js 3:568错误“导出”被定义，但从未使用非未使用的-vars.
2. replace插件没有替换main.es6.js中的ENV常量： 5:6错误“ENV”未定义为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 options等中)意味着web/wp-content/themes/my-theme/assets/js/node_modules --这当然不是您想要的。

您可以像这样显式地解析node_modules ..。

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

...but的另一种选择是在项目的根目录中有一个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;

(请注意，这需要Rollup0.43，它允许一个配置文件导出一个信任数组。)

发生'ENV' is not defined错误是因为replace插件在eslint插件之后出现。换一下那一轮，它就能用了。