我正在编写一个需要代码编辑器的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';
....
捆绑有效，但是当我运行应用程序时，出现以下控制台错误：
未捕获的错误：找不到模块'./utils/common'
有问题的代码行可以在/node_modules/emmet/lib/emmet.js第10行中找到
var utils = require（'./ utils / common'）;
我正在将Webpack与打字稿一起使用。
package.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));
}
}
}
});