Code Monkey home page Code Monkey logo

babel-preset-vue-app's Introduction

THIS REPOSITORY IS DEPRECATED

We have deprecated this repository. Users should use vue-cli 3, which comes with its own babel preset.

babel-preset-vue-app

NPM version NPM downloads

Features

  • Latest ECMAScript features (babel-preset-env)
  • Object rest spread and dynamic import
  • Transform Vue JSX
  • Transform generator and async/await

Install

yarn add babel-preset-vue-app --dev

Usage

// .babelrc
{
  "presets": ["vue-app"]
}

Options

useBuiltIns

Type: boolean
Default: false

Disable runtime transform. i.e. do not add helpers and polyfill for unsupported features of target environment, eg: Object.assign, Promise

As we're using babel-plugin-transform-runtime to polyfill your code without polluting globals, something like "foobar".includes("foo") will not work since that would require modification of existing builtins. See babel-plugin-transform-runtime.

targets

Type: object
Default: { node: 'current' } when env is test or { ie: 9, uglify: true } otherwise.

Takes an object of environment versions to support.

As we're using babel-preset-env to determine the Babel plugins and polyfills you need, this option lets you adjust your supported environments. See targets in babel-preset-env.

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

License

MIT.

babel-preset-vue-app's People

Contributors

egoist avatar linusborg avatar sobolevn avatar sullivanpt avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

babel-preset-vue-app's Issues

Add tests

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

Use babel-polyfill

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.

Support browserslist

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?

babel-node

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?

AVA sets NODE_ENV=test, which breaks tests

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()
})

Object.assign support

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?

Any chance you could add stage-2 support by default?

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.

upgrade babel-preset-vue's version to utilize h-auto-injection in JSX

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:

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

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.