代码之家 › 专栏 › 技术社区 › Ahmet Emre Kilinc

(插件汇总插件外部全局变量)SyntaxError:意外的令牌(1:0)

rollup-plugin-external-globals rollup reactjs

0

Ahmet Emre Kilinc · 技术社区 · 2 年前

我使用 rollup v3.2.2作为我的React项目中的模块打包器。我补充道 rollup-plugin-external-globals 依赖于我的项目,以便全局处理一些外部库。在那之后,当我用 rollup --config rollup.config.mjs -w 命令:

bundles src/lib/index.js â dist/index.es.js, dist/index.js...
[!] (plugin rollup-plugin-external-globals) SyntaxError: Unexpected token (1:0)
src/lib/index.css (1:0)
SyntaxError: Unexpected token (1:0)
    at Parser.pp$4.raise (C:\my-project\node_modules\rollup\dist\shared\rollup.js:20372:13)

中的相关配置 汇总配置.js 以下为:

import externalGlobals from 'rollup-plugin-external-globals';


plugins: [
    ...
    externalGlobals({
        react: 'React',
        'react-dom': 'ReactDOM',
    }),
    ...
]

中的相关依赖项 软件包.json 以下为:

...
"devDependencies": {
    "rollup": "3.2.2",
    "rollup-plugin-external-globals": "0.7.3",
}

根据错误日志,意外的令牌错误与 index.css 文件但是,即使 src/lib/index.css 文件也是空的。应该做些什么来修复这个错误?

0 回复 | 直到 2 年前

1

0

Ahmet Emre Kilinc 2 年前

这个问题与汇总配置中插件的顺序有关。这个 rollup-plugin-external-globals 插件应该在两者之后 @rollup/plugin-babel 和 rollup-plugin-postcss 插件。在我的情况下,当我的 汇总配置.js 是这样的:

import babel from '@rollup/plugin-babel';
import postcss from 'rollup-plugin-postcss';
import externalGlobals from 'rollup-plugin-external-globals';
...

plugins: [
    ...
    babel({
        babelrc: false,
        babelHelpers: 'bundled',
        exclude: 'node_modules/**',
        plugins: ['@babel/plugin-proposal-function-bind', '@babel/plugin-proposal-class-properties'],
        presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-react'],
    }),
    resolve({
        mainFields: ['browser', 'jsnext', 'module', 'main'],
    }),
    postcss({
        extensions: ['.css'],
    }),
    externalGlobals({
        react: 'React',
        'react-dom': 'ReactDOM',
    }),
    ...
]