vuejs / babel-preset-vue-app Goto Github PK

Is there a reason this setup uses babel-runtime over babel-polyfill?

As per this issue babel/babel#3825, babel-polyfill is most useful for applications, so that it can have as close as possible to a real ES6 environment, since a limitation of
babel-runtime is that it does not work with certain parts of ES6, such as certain instance methods.

Any plans?

The problem

We are now using Poi to build some web applications based on Vue and we use some JSX syntax in developing some vue components (also, the components are build with Poi).

And we found that, the babel plugin vuejs/babel-plugin-transform-vue-jsx would support h auto-injection since v3.4.0, which is a good feature that would save us from writing a lot of 'h's.

However the Poi build failed after we omit the 'h' in our code:

// one of our component

export default {
  name: 'MyComponent'

  // here we didn't pass h
  render() {
    // some JSX
  }
}

When we add the h back everything turns alright, so it seems like the babel-plugin-transform-vue-jsx didn't act as we expected.

Why

So I check the dependency chain from poi to babel-plugin-transform-vue-jsx, it turns out like this:

poi => babel-preset-vue-app => babel-preset-vue => babel-plugin-transform-vue-jsx

and I collect the latest version of each package in the chain:

• In [email protected]: "babel-plugin-transform-vue-jsx": "^3.5.0"
• In [email protected]: "babel-preset-vue": "^0.1.0"
• In [email protected]: "babel-preset-vue-app": "^1.2.0"

It turns out that because babel-preset-vue-app declare babel-preset-vue to be ^0.1.0. So we could only install the 0.x.y version of babel-preset-vue when we install poi, thus caused the version of babel-plugin-transform-vue-jsx is not the latest: https://github.com/vuejs/babel-preset-vue/blob/v0.2.0/package.json#L34

Solution

Change the version of babel-preset-vue to the latest version in package.json

We use AVA for testing our Vue app. Recently they released version 0.23 which sets NODE_ENV=test if not already set (see avajs/ava#1470 and avajs/ava#1523 for additional context).

This change blew up our test builds. We traced it to this package (babel-prest-vue-app), which overrides targets if NODE_ENV=test, with no way to circumvent this via configuration. This breaks client-side code which is intended to run in a browser (we use Puppeteer to control chrome for integration tests).

We’re currently using a workaround to explicitly set process.env.BABEL_ENV = 'production' before building. See example code below.

Request: do not override targets if NODE_ENV == test.

import test from 'ava'
import { Nuxt, Builder } from 'nuxt'
import { resolve } from 'path'

export var nuxt = null
export var host = null
export var port = null
export var baseURL = null

// Init Nuxt.js and start listening at http://localhost:4000
test.before('Init Nuxt.js', async t => {
  // Explicitly override BABEL_ENV='production' here because
  // ava sets NODE_ENV='test' which breaks babel-preset-vue-app,
  // which in turn breaks uglify-js, which breaks our build.
  process.env.BABEL_ENV = 'production'
  const rootDir = resolve(__dirname, '../..')
  let config = {}
  config = require(resolve(rootDir, 'nuxt.config.js'))
  config.rootDir = rootDir // project folder
  config.dev = false // production build
  nuxt = new Nuxt(config)
  const builder = new Builder(nuxt)
  await builder.build()
  host = process.env.HOST || 'localhost'
  port = process.env.PORT || 4000
  nuxt.listen(port, host)
  baseURL = `http://${host}:${port}`
})

// Teardown
test.after.always('Shutdown Nuxt.js server', async t => {
  nuxt.close()
})

When updating this package I got the above error. It just looks like you forgot to add a dependency in the release you just did (1.1.0)

To make sure #3 and such will never happen again 😂

Hello!

First of all thanks a lot for creating this and poi.

I am building my app with poi. My app also uses Vuex. In the Vuex documentation, there are examples that have syntax which require stage-2 e.g.

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // map this.increment() to this.$store.dispatch('increment')

      // mapActions also supports payloads:
      'incrementBy' // this.incrementBy(amount) maps to this.$store.dispatch('incrementBy', amount)
    ]),
    ...mapActions({
      add: 'increment' // map this.add() to this.$store.dispatch('increment')
    })
  }

Without stage-2, this example from the Vuex documentation gives out a syntax error. I think it would be good if this vue preset could run things form the Vuex examples without modification, given that Vuex is an official library used by many people.

Iv used vue-cli 3 to set up a project and I want to run some scripts manually with babel-node. My babel config is unchanged from the defaults vue-cli set. When I run my script it doesnt seem to work as expected:

PS D:\Projects\kuya-mc2> npx babel-node .\src\lib\data.js
npx: installed 1 in 1.565s
Path must be a string. Received undefined
D:\Projects\kuya-mc2\node_modules\@babel\node\bin\babel-node.js
D:\Projects\kuya-mc2\src\lib\data.js:1
(function (exports, require, module, __filename, __dirname) { import "core-js/modules/es6.array.iterator";
                                                              ^^^^^^

Any hints?

babel-preset-env internally uses browserslist to get the actual browser versions.

But currently in babel-preset-vue-app we use { ie: 9, uglify: true } as default targets value.
So, should we consider supporting browserslist?

We need to add decorators and class properties support for this.

Hi. This is following to a report in nuxt/nuxt#463 . According to index.js:16 we are targeting IE+9.
But as indicated here Object assign is not supported in many environments including :
IE: ... 11
Android: .... 4.4, 5.0, 5.1
IOS: ... 8, 9

Isn't this a big miss? We already have regenerator runtime and adding another lightweight transform would add vue.js support for many many devices. @egoist What is your idea about that?

最近更新到版本1.1.1

把版本回退到0.4.0 问题就没有了