Git Product home page Git Product logo

Comments (9)

ckken avatar ckken commented on August 19, 2024

可否共享下 demo 代码 这样描述没法帮你解决问题

from emp.

flyyuan avatar flyyuan commented on August 19, 2024

可以先把 node 升级到 14版本再试试

from emp.

xiasiyong avatar xiasiyong commented on August 19, 2024

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.

flyyuan avatar flyyuan commented on August 19, 2024

@xiasiyong
从 @vue/cli 的 Vue2 模版迁移到 EMP Vue2

  1. 删除 node_modules 目录

  2. 在 package.json 删除以下依赖

    "@vue/cli-service": "~4.5.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",

  1. yarn add -D @efox/emp-cli @efox/emp-vue2

  2. yarn

  3. 在项目根目录创建 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
  })
})
  1. 修改 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>
  1. 将 package.json 的 script 修改为以下内容
  "scripts": {
    "dev": "emp dev",
    "build": "emp build --env prod",
    "start": "emp serve",
    "stat": "emp build --analyze",
    "emp": "emp"
  },
  1. 删除 babel.config.js
  2. 重命名 main.js 为 bootstrap.js
  3. 新建 main.js
import('./bootstrap')
  1. 即可使用emp, yarn dev 启动

from emp.

Asarua avatar Asarua commented on August 19, 2024

@xiasiyong
从 @vue/cli 的 Vue2 模版迁移到 EMP Vue2

  1. 删除 node_modules 目录
  2. 在 package.json 删除以下依赖
    "@vue/cli-service": "~4.5.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
  1. yarn add -D @efox/emp-cli @efox/emp-vue2
  2. yarn
  3. 在项目根目录创建 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
  })
})
  1. 修改 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>
  1. 将 package.json 的 script 修改为以下内容
  "scripts": {
    "dev": "emp dev",
    "build": "emp build --env prod",
    "start": "emp serve",
    "stat": "emp build --analyze",
    "emp": "emp"
  },
  1. 删除 babel.config.js
  2. 重命名 main.js 为 bootstrap.js
  3. 新建 main.js
import('./bootstrap')
  1. 即可使用emp, yarn dev 启动

请问一下，这个babel.config.js是必须删除的吗

from emp.

flyyuan avatar flyyuan commented on August 19, 2024

可以不删，但是 emp 内置了 babel 配置

from emp.

Asarua avatar Asarua commented on August 19, 2024

可以不删，但是 emp 内置了 babel 配置

原来我的项目里面是有配置可选链和空值合并的配置的，现在用emp可以直接使用吗？如果不行，那该怎么配置比较好呢

from emp.

flyyuan avatar flyyuan commented on August 19, 2024

可以不删，但是 emp 内置了 babel 配置

原来我的项目里面是有配置可选链和空值合并的配置的，现在用emp可以直接使用吗？如果不行，那该怎么配置比较好呢

不能直接使用。需要通过 Webpack-chain 在 emp.config.js 上进行配置，具体用法参考：https://github.com/neutrinojs/webpack-chain。

from emp.

Asarua avatar Asarua commented on August 19, 2024

可以不删，但是 emp 内置了 babel 配置

原来我的项目里面是有配置可选链和空值合并的配置的，现在用emp可以直接使用吗？如果不行，那该怎么配置比较好呢

不能直接使用。需要通过 Webpack-chain 在 emp.config.js 上进行配置，具体用法参考：https://github.com/neutrinojs/webpack-chain。

好的，谢谢

from emp.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.