Javascript “与”的网页包捆绑问题;要求在第三方包装中使用(./…”
我正在编写一个Electron应用程序,需要代码编辑器。我使用react作为渲染器,所以我决定使用react ace。 在我尝试添加emmet之前,一切正常。 据我所知,我必须导入emmet软件包本身。 因此,在呈现编辑器的组件上,我添加了导入Javascript “与”的网页包捆绑问题;要求在第三方包装中使用(./…”,javascript,webpack,emmet,Javascript,Webpack,Emmet,我正在编写一个Electron应用程序,需要代码编辑器。我使用react作为渲染器,所以我决定使用react ace。 在我尝试添加emmet之前,一切正常。 据我所知,我必须导入emmet软件包本身。 因此,在呈现编辑器的组件上,我添加了导入 import 'emmet'; import * as React from 'react'; import AceEditor from 'react-ace'; import 'brace/ext/emmet'; import 'brace/mod
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')
我正在使用带有typescript的网页包
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']),
]
};
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));
}
}
}
});
webpack.renderer.prod.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']),
]
};
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));
}
}
}
});
尝试改用软件包。
emmet
是旧软件包,不再受支持。听起来不错,但根据我发现的将emmet集成到AceEditor的方法,使用expand缩写应该是什么样子?你需要为Ace editor创建emmet插件。emmet提供了从给定插入符号位置提取缩写的工具在文档中:它将为您提供一系列缩写,您应该用扩展的结果替换这些缩写,因为现在安装似乎可以完成这项工作。但是,对于长期支持,在ace(和/或大括号)中制作一个插件以支持扩展缩写是合理的。