Code Monkey home page Code Monkey logo

Comments (6)

masongzhi avatar masongzhi commented on August 11, 2024 1

you can modify the webpack.base.conf.js before we decide to transpile vue-timers to es5

module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('node_modules/vue-timers')],
      }
    ]
  }

reference: babel/babel-loader#171 (comment)

from vue-timers.

masongzhi avatar masongzhi commented on August 11, 2024 1

@JavierPAYTEF @rbanks54 it has been resolve on version 2.0.0 now

from vue-timers.

Kelin2025 avatar Kelin2025 commented on August 11, 2024

^ This

from vue-timers.

JavierPAYTEF avatar JavierPAYTEF commented on August 11, 2024

Sorry it took me a little while to answer, I had already tested this and it doesn't work, I tried it again just in case. I also attemped to change a lot of other thigns but I don't event know where node_modules is being ignored, maybe from another configuration file. I also don't use the "exclude" variable, I'm assuming node_modules is being excluded on one of the babel presets or something like that.

The only thing that allows me to compile is manually replacing "const" with "var" in utils.js

I understand that maybe I'm doing something wrong with the configuration but this is the only module that's throwing a compile error for me, which seems weird.

This is my webpack.base.conf.js in case you want to see it.

var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
var fs = require('fs')

const { VueLoaderPlugin } = require('vue-loader')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  entry: {
    app: ['@babel/polyfill','./src/main.js']
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  },
  module: {
    rules: [
      {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test'), resolve('node_modules/vue-timers')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/vue-timers')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]'),
          // workaround for vuejs-templates webpack issue 1266
          publicPath: process.env.NODE_ENV === 'production' ? '../' : '/'
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

Also .babelrc looks like this:

{
  "presets": [
    [
      "@babel/env",
      {
        "modules": false,
        "targets": {
          "browsers": [
            "> 1%",
            "last 2 versions",
            "not ie <= 8"
          ]
        }
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": false
      }
    ],
    "@babel/plugin-proposal-json-strings"
  ],
  "env": {
    "test": {
      "presets": [
        "@babel/env"
      ],
      "plugins": [
        "istanbul",
        [
          "@babel/plugin-proposal-decorators",
          {
            "legacy": true
          }
        ],
        "@babel/plugin-proposal-function-sent",
        "@babel/plugin-proposal-export-namespace-from",
        "@babel/plugin-proposal-numeric-separator",
        "@babel/plugin-proposal-throw-expressions",
        "@babel/plugin-syntax-dynamic-import",
        "@babel/plugin-syntax-import-meta",
        [
          "@babel/plugin-proposal-class-properties",
          {
            "loose": false
          }
        ],
        "@babel/plugin-proposal-json-strings"
      ]
    }
  }
}

from vue-timers.

rbanks54 avatar rbanks54 commented on August 11, 2024

@JavierPAYTEF I also had trouble with this.

I even got to the point of checking if I had my babel exclude regex wrong by adding an exclude function like the following:

      {
        test: /\.js$/,
        loader: 'babel-loader',
        //We need to transpile vue-timers from node_modules. We don't want to exclude it
        exclude: file => {
          const exclude = /node_modules/.test(file) &&
          !/.*vue-timers.*/.test(file) &&
          !/\.vue\.js/.test(file)

          if (/.*vue-timers.*/.test(file)) console.log(`${file} is ${exclude ? 'excluded' : 'included'}`)
          return exclude
      }

It showed the vue-timers files were included (or, at least, not excluded by the regex), but Uglify was still complaining. I also tried adding a specific include condition, just in case, and that only ended up breaking other things. 🤦‍♂️

I ended up just copying the mixin code over to my main src folder as-is, reverted to ignoring all of node_modules completely, and now everything now works as expected. 🙌

Yes, I'll need to keep out for any future releases, but the approach works and I'm no longer banging my head on a table trying to diagnose whatever webpack 4, babel and uglify are doing that's causing me grief.

from vue-timers.

JavierPAYTEF avatar JavierPAYTEF commented on August 11, 2024

@rbanks54 Thanks for the input, the same happened to me. I think the issue is that the code needs to be converted to es5 by babel before it goes through UglifyJS. If Uglify gets code that is not es5 it complains.

I get the author doesn't want to transpile this to es5, it's their library after all and I'm just borrowing the code, but taking a step back it's weird to be having to put specific rules and exemptions in the webpack configuration just to make this work. All the other libraries just work.

I'm sad I wasted so many hours trying to fix this and will have to waste more to replace this library in the end. The only thing I learned from this is that webpack configuration is a nightmare.

from vue-timers.

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.