Comments (9)
可否共享下 demo 代码 这样描述没法帮你解决问题
from emp.
可以先把 node 升级到 14版本再试试
from emp.
github: https://github.com/xiasiyong/vue-project-emp
开发环境, mac, node版本:v14.15.1
使用的@vue/cli 创建的新项目,接入emp,会遇到两个问题
1:使用yarn安装依赖,yarn dev, 会报错
(node:35730) UnhandledPromiseRejectionWarning: Error: Compiling RuleSet failed: Unexpected property test in condition (at ruleSet[1].rules[1].resource.test: resource => {
currentResource = resource
return true
})
at RuleSetCompiler.error (/micro-end/old-vue-project/node_modules/@efox/emp-cli/node_modules/webpack/lib/rules/RuleSetCompiler.js:365:10)
at RuleSetCompiler.compileCondition (/micro-end/old-vue-project/node_modules/@efox/emp-cli/node_modules/webpack/lib/rules/RuleSetCompiler.js:301:17)
at /micro-end/old-vue-project/node_modules/@efox/emp-cli/node_modules/webpack/lib/rules/BasicMatcherRulePlugin.js:29:40
at Hook.eval [as call] (eval at create (/micro-end/old-vue-project/node_modules/@efox/emp-cli/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:17:1)
at RuleSetCompiler.compileRule (/micro-end/old-vue-project/node_modules/@efox/emp-cli/node_modules/webpack/lib/rules/RuleSetCompiler.js:175:19)
at /micro-end/old-vue-project/node_modules/@efox/emp-cli/node_modules/webpack/lib/rules/RuleSetCompiler.js:152:9
at Array.map (<anonymous>)
at RuleSetCompiler.compileRules (/micro-end/old-vue-project/node_modules/@efox/emp-cli/node_modules/webpack/lib/rules/RuleSetCompiler.js:151:16)
at RuleSetCompiler.compileRule (/micro-end/old-vue-project/node_modules/@efox/emp-cli/node_modules/webpack/lib/rules/RuleSetCompiler.js:182:30)
at /micro-end/old-vue-project/node_modules/@efox/emp-cli/node_modules/webpack/lib/rules/RuleSetCompiler.js:152:9
at Array.map (<anonymous>)
at RuleSetCompiler.compileRules (/micro-end/old-vue-project/node_modules/@efox/emp-cli/node_modules/webpack/lib/rules/RuleSetCompiler.js:151:16)
at RuleSetCompiler.compile (/micro-end/old-vue-project/node_modules/@efox/emp-cli/node_modules/webpack/lib/rules/RuleSetCompiler.js:68:22)
at new NormalModuleFactory (/micro-end/old-vue-project/node_modules/@efox/emp-cli/node_modules/webpack/lib/NormalModuleFactory.js:198:34)
at Compiler.createNormalModuleFactory (/micro-end/old-vue-project/node_modules/@efox/emp-cli/node_modules/webpack/lib/Compiler.js:948:31)
at Compiler.newCompilationParams (/micro-end/old-vue-project/node_modules/@efox/emp-cli/node_modules/webpack/lib/Compiler.js:967:30)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:35730) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:35730) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
2: 删掉node_modules, 使用cnpm安装以来,npm run dev, 项目可以跑起来,但是,稍微修改一下源代码,webpack就会卡死
● Webpack █████████████████████████ sealing (92%)
asset processing
过一会儿,
<--- Last few GCs --->
[36789:0x1046c2000] 114357 ms: Mark-sweep (reduce) 2035.3 (2051.1) -> 2034.5 (2052.1) MB, 1248.3 / 0.8 ms (average mu = 0.106, current mu = 0.018) allocation failure scavenge might not succeed
[36789:0x1046c2000] 116076 ms: Mark-sweep (reduce) 2035.5 (2051.1) -> 2034.6 (2052.1) MB, 1699.3 / 7.3 ms (average mu = 0.056, current mu = 0.011) allocation failure scavenge might not succeed
<--- JS stacktrace --->
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
1: 0x1012e2bc5 node::Abort() (.cold.1) [/usr/local/bin/node]
2: 0x1000a5cb9 node::Abort() [/usr/local/bin/node]
3: 0x1000a5e1f node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
4: 0x1001e83e7 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
5: 0x1001e8383 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
6: 0x100397275 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/bin/node]
7: 0x100398d3a v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [/usr/local/bin/node]
8: 0x100394409 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/bin/node]
9: 0x100391ca1 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
10: 0x1003a053a v8::internal::Heap::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node]
11: 0x1003a05c1 v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node]
12: 0x10036df67 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/usr/local/bin/node]
13: 0x1006ecca8 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/usr/local/bin/node]
14: 0x100a795f9 Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_NoBuiltinExit [/usr/local/bin/node]
from emp.
@xiasiyong
从 @vue/cli 的 Vue2 模版迁移到 EMP Vue2
-
删除
node_modules
目录 -
在
package.json
删除以下依赖
"@vue/cli-service": "~4.5.0",
"@vue/cli-plugin-babel": "~4.5.0",
"less": "^3.0.4",
"less-loader": "^5.0.0",
-
yarn add -D @efox/emp-cli @efox/emp-vue2
-
yarn
-
在项目根目录创建
emp-config.js
const withVue2 = require('@efox/emp-vue2')
module.exports = withVue2(({config}) => {
const projectName = 'vue2Base'
const port = 8009
config.output.publicPath(`http://localhost:${port}/`)
config.devServer.port(port)
config.plugin('mf').tap(args => {
args[0] = {
...args[0],
...{
name: projectName,
library: {type: 'var', name: projectName},
filename: 'emp.js',
exposes: {
},
// shared: ['vue/dist/vue.esm.js'],
},
}
return args
})
config.plugin('html').tap(args => {
args[0] = {
...args[0],
...{
title: 'EMP Vue2 Base',
},
}
return args
})
})
- 修改
public/index.html
的 head
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= htmlWebpackPlugin.options.url %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- EMP inject css -->
<% for (let i in htmlWebpackPlugin.options.files.css) { %>
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.files.css[i] %>" /><% } %>
<!-- EMP inject js -->
<% for (let i in htmlWebpackPlugin.options.files.js) { %>
<script src="<%= htmlWebpackPlugin.options.files.js[i] %>"></script><% } %>
</head>
- 将 package.json 的
script
修改为以下内容
"scripts": {
"dev": "emp dev",
"build": "emp build --env prod",
"start": "emp serve",
"stat": "emp build --analyze",
"emp": "emp"
},
- 删除
babel.config.js
- 重命名
main.js
为bootstrap.js
- 新建
main.js
import('./bootstrap')
- 即可使用emp,
yarn dev
启动
from emp.
@xiasiyong
从 @vue/cli 的 Vue2 模版迁移到 EMP Vue2
- 删除
node_modules
目录- 在
package.json
删除以下依赖"@vue/cli-service": "~4.5.0", "@vue/cli-plugin-babel": "~4.5.0", "less": "^3.0.4", "less-loader": "^5.0.0",
yarn add -D @efox/emp-cli @efox/emp-vue2
yarn
- 在项目根目录创建
emp-config.js
const withVue2 = require('@efox/emp-vue2') module.exports = withVue2(({config}) => { const projectName = 'vue2Base' const port = 8009 config.output.publicPath(`http://localhost:${port}/`) config.devServer.port(port) config.plugin('mf').tap(args => { args[0] = { ...args[0], ...{ name: projectName, library: {type: 'var', name: projectName}, filename: 'emp.js', exposes: { }, // shared: ['vue/dist/vue.esm.js'], }, } return args }) config.plugin('html').tap(args => { args[0] = { ...args[0], ...{ title: 'EMP Vue2 Base', }, } return args }) })
- 修改
public/index.html
的 head<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= htmlWebpackPlugin.options.url %>favicon.ico"> <title><%= htmlWebpackPlugin.options.title %></title> <!-- EMP inject css --> <% for (let i in htmlWebpackPlugin.options.files.css) { %> <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.files.css[i] %>" /><% } %> <!-- EMP inject js --> <% for (let i in htmlWebpackPlugin.options.files.js) { %> <script src="<%= htmlWebpackPlugin.options.files.js[i] %>"></script><% } %> </head>
- 将 package.json 的
script
修改为以下内容"scripts": { "dev": "emp dev", "build": "emp build --env prod", "start": "emp serve", "stat": "emp build --analyze", "emp": "emp" },
- 删除
babel.config.js
- 重命名
main.js
为bootstrap.js
- 新建
main.js
import('./bootstrap')
- 即可使用emp,
yarn dev
启动
请问一下,这个babel.config.js是必须删除的吗
from emp.
可以不删,但是 emp 内置了 babel 配置
from emp.
可以不删,但是 emp 内置了 babel 配置
原来我的项目里面是有配置可选链和空值合并的配置的,现在用emp可以直接使用吗?如果不行,那该怎么配置比较好呢
from emp.
可以不删,但是 emp 内置了 babel 配置
原来我的项目里面是有配置可选链和空值合并的配置的,现在用emp可以直接使用吗?如果不行,那该怎么配置比较好呢
不能直接使用。需要通过 Webpack-chain 在 emp.config.js 上进行配置,具体用法参考:https://github.com/neutrinojs/webpack-chain。
from emp.
可以不删,但是 emp 内置了 babel 配置
原来我的项目里面是有配置可选链和空值合并的配置的,现在用emp可以直接使用吗?如果不行,那该怎么配置比较好呢
不能直接使用。需要通过 Webpack-chain 在 emp.config.js 上进行配置,具体用法参考:https://github.com/neutrinojs/webpack-chain。
好的,谢谢
from emp.
Related Issues (20)
- emp v2.6.6 在vue项目中如何实现三级共享的?比如ant design vue 这种组件库如何只加载一次? HOT 1
- 请问umi 如何集成 emp HOT 1
- .env文件解析优化 HOT 1
- 《Vue3 也能用上 Vue2 组件 From EMP》项目示例丢失 HOT 2
- efox/emp 依赖的less和less-loader与antd 依赖的冲突问题 HOT 1
- 环境变量引起的报错,emp-config中没有配置define HOT 1
- 官网图片展示错误,裂了 HOT 2
- exposes只能暴露组件吗,可以添加封装的公共方法js文件吗 HOT 1
- vue2脚手架项目迁移,读取不到env里配置的环境变量
- EMP2.7.1下使用Vue-3-project工程打包失败 HOT 1
- __VUE_PROD_DEVTOOLS__ is not defined HOT 2
- 在库中使用vue插槽会使currentRenderingInstance为null HOT 6
- vue-tsc: 1.8.27([email protected]) 没有__internal__ 字段 HOT 1
- EMP3环境下,yarn出现webpack module未安装问题 HOT 1
- The generated code contains 'async/await' because this module is using "external script". HOT 1
- 修改内容热更新时服务就panic了 HOT 1
- 先加载的会被后加载的复盖 HOT 1
- __file 路径相同 会引起热更混乱 HOT 2
- 按文档说明, EMP3 demo mf-host 不能运行 HOT 5
- 按照文档克隆emp项目后,使用pnpm启动项目报错 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from emp.