问题描述
我一直在研究一个自定义汇总配置,它采用 React 项目,并在 index.html 中内联 js 和 css。
当我导入一些第三方反应库(如 material-ui-color)时,我遇到了 Commonjs 的问题,它说存在语法错误。到目前为止,在我尝试安装的库中,“进程”这个词最常见的是它打破的词。这是 material-ui-color 问题的日志:
[!] (plugin commonjs) SyntaxError: Unexpected token (205:28) in /Users/meyerm/Documents/GitHub/button-generator-figma-plugin/node_modules/jss/dist/jss.esm.js
node_modules/jss/dist/jss.esm.js (205:28)
203: var newValue = value;
204:
205: if (!options || options.process !== false) {
^
我已经包含了 rollup-plugin-replace 来修复任何出现的 process.env.NODE_ENV
,但这似乎是一个不同的问题。
这是我的汇总配置:
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import livereload from 'rollup-plugin-livereload';
import replace from '@rollup/plugin-replace';
import { terser } from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss';
import html from 'rollup-plugin-bundle-html-plus';
import typescript from 'rollup-plugin-typescript';
import svgr from '@svgr/rollup';
const production = !process.env.ROLLUP_WATCH;
export default [
/*
Transpiling React code and injecting into index.html for figma
*/
{
input: 'src/app/index.tsx',output: {
name: 'ui',file: 'dist/bundle.js',format: 'umd',},plugins: [
// What extensions is rollup looking for
resolve({
extensions: ['.jsx','.js','.json','.ts','.tsx'],}),// Manage process.env
replace({
preventAssignment: true,process: JSON.stringify({
env: {
isProd: production,'process.env.NODE_ENV': JSON.stringify(production),typescript({ sourceMap: !production }),// Babel config to support React
babel({
presets: ['@babel/preset-react','@babel/preset-env'],babelHelpers: 'runtime',plugins: ['@babel/plugin-transform-runtime'],extensions: ['.js','tsx','jsx'],compact: true,exclude: 'node_modules/**',commonjs({
include: 'node_modules/**',svgr(),// Config to allow sass and css modules
postcss({
extensions: ['.css,.scss,.sass'],modules: true,use: ['sass'],// Injecting UI code into ui.html
html({
template: 'src/app/index.html',dest: 'dist',filename: 'index.html',inline: true,inject: 'body',ignore: /code.js/,// If dev mode,serve and livereload
!production && serve(),!production && livereload('dist'),// If prod mode,minify
production && terser(),],watch: {
clearScreen: true,/*
Main figma plugin code
*/
{
input: 'src/plugin/controller.ts',output: {
file: 'dist/code.js',format: 'iife',name: 'code',plugins: [resolve(),typescript(),commonjs({ transformMixedEsModules: true }),production && terser()],];
function serve() {
let started = false;
return {
writeBundle() {
if (!started) {
started = true;
// Start localhost dev server on port 5000 to work on the UI in the browser
require('child_process').spawn('npm',['run','start','--','--dev'],{
stdio: ['ignore','inherit','inherit'],shell: true,});
}
},};
}
有什么想法可以克服这个问题并将第 3 方库轻松导入到项目中吗?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)