gpt4 book ai didi

javascript - 第三方 packageas 中 "require(./....."的 Webpack 捆绑问题

转载 作者:行者123 更新时间:2023-11-30 14:05:33 25 4
gpt4 key购买 nike

我正在编写一个需要代码编辑器的 Electon 应用程序。我使用 react 作为渲染器,所以我决定使用 react-ace。 https://github.com/securingsincity/react-ace

一切正常,直到我尝试添加 emmet。据我所知,我必须自己导入 emmet 包。因此,在我呈现编辑器的组件上,我添加了导入

import 'emmet';
import * as React from 'react';
import AceEditor from 'react-ace';
import 'brace/ext/emmet';
import 'brace/mode/html';
import 'brace/mode/css';
import 'brace/theme/idle_fingers';
....

捆绑有效,但是当我运行该应用程序时,出现以下控制台错误:

Uncaught Error: Cannot find module './utils/common'

有问题的代码行可以在/node_modules/emmet/lib/emmet.js 第 10 行找到

var utils = require('./utils/common');

我正在使用 webpack 和 typescript。

包.json

{
....
"devDependencies": {
"@types/electron-devtools-installer": "^2.2.0",
"@types/history": "^4.7.2",
"@types/jsdom": "^12.2.3",
"@types/ncp": "^2.0.1",
"@types/node": "^11.11.2",
"@types/react": "^16.8.7",
"@types/react-dom": "^16.8.2",
"@types/react-redux": "^7.0.3",
"@types/react-router-dom": "^4.3.1",
"@types/redux-logger": "^3.0.7",
"@types/styled-components": "^4.1.12",
"@types/webpack-env": "^1.13.9",
"brace": "^0.11.1",
"concurrently": "^4.1.0",
"connected-react-router": "^6.3.1",
"copy-webpack-plugin": "^5.0.0",
"cross-env": "^5.2.0",
"css-loader": "^2.1.0",
"electron": "^4.0.5",
"electron-builder": "^20.38.4",
"electron-devtools-installer": "^2.2.4",
"electron-log": "^3.0.1",
"electron-updater": "^4.0.6",
"emmet": "^1.6.3",
"history": "^4.7.2",
"html-webpack-plugin": "^3.2.0",
"i18next": "^15.0.6",
"jsdom": "^14.0.0",
"mini-css-extract-plugin": "^0.5.0",
"moment": "^2.24.0",
"ncp": "^2.0.0",
"node-sass": "^4.11.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"prettier": "^1.15.3",
"react": "^16.8.4",
"react-ace": "^6.4.0",
"react-dom": "^16.8.4",
"react-hot-loader": "^4.8.0",
"react-i18next": "^10.4.1",
"react-redux": "^6.0.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-test-renderer": "^16.7.0",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"rxjs": "^6.4.0",
"sass-loader": "^7.1.0",
"sb-fs": "^3.0.0",
"style-loader": "^0.23.1",
"styled-components": "^4.1.3",
"ts-loader": "^5.3.3",
"tslint": "^5.13.0",
"typescript": "^3.3.3333",
"typescript-plugin-styled-components": "^1.3.0",
"webpack": "^4.29.5",
"webpack-bundle-analyzer": "^3.0.3",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.1.14",
"webpack-merge": "^4.1.5"
},
"browserslist": "electron 1.6"
}

webpack.common.config.js

module.exports = {
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
loader: 'ts-loader',
},
// https://github.com/ashtuchkin/iconv-lite/issues/205
{
test: /node_modules[\/\\](iconv-lite)[\/\\].+/,
resolve: {
aliasFields: ['main']
}
},
]
},
resolve: {
extensions: ['.js', '.ts', '.tsx', '.json']
},
output: {
path: path.resolve(__dirname, '..', 'dist'),
},
plugins: [
new webpack.EnvironmentPlugin(['NODE_ENV', 'PORT', 'HOT']),
]
};

webpack.renderer.prod.config.js

module.exports = merge.smart(baseConfig, {
devtool: 'none',
mode: 'development',
target: 'electron-renderer',

entry: [
'react-hot-loader/patch',
`webpack-dev-server/client?http://localhost:${port}/`,
'webpack/hot/only-dev-server',
path.join(__dirname, '..', 'src', 'app', 'renderer', 'index.tsx'),
],

output: {
publicPath,
filename: 'renderer.dev.js'
},

module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
loader: 'ts-loader',
options: {
getCustomTransformers: () => ({before: [styledComponentsTransformer]}),
}
},
{
test: /\.(s?css|)$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
},
{
loader: 'sass-loader'
}
]
},
{
test: /node_modules[\/\\](emmet)[\/\\].+/,
resolve: {
modules: ['node_modules/emmet/lib'],
}
}

]
},
plugins: [
new webpack.HotModuleReplacementPlugin({
multiStep: true
}),
],

node: {
__dirname: false,
},

devServer: {
port,
publicPath,
compress: true,
noInfo: true,
stats: 'errors-only',
inline: true,
lazy: false,
hot: true,
headers: {'Access-Control-Allow-Origin': '*'},
contentBase: path.join(__dirname),
watchOptions: {
aggregateTimeout: 300,
ignored: /node_modules/,
poll: 100
},
historyApiFallback: {
verbose: true,
disableDotRule: false
},
before() {
if (process.env.HOT) {
console.log('Building main...');
spawn('npm', ['run', 'dev-main'], {
shell: true,
env: process.env,
stdio: 'inherit'
})
.on('close', code => process.exit(code))
.on('error', spawnError => console.error(spawnError));
}
}
}
});

最佳答案

尝试使用https://github.com/emmetio/expand-abbreviation包代替。 emmet 是旧包,不再支持

关于javascript - 第三方 packageas 中 "require(./....."的 Webpack 捆绑问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55482066/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com