Comments (6)
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.
@JavierPAYTEF @rbanks54 it has been resolve on version 2.0.0 now
from vue-timers.
^ This
from vue-timers.
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.
@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.
@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)
- Combine Timer with Mouse Idle HOT 3
- If using a non-repeating timer, 'isRunning' is not set to false when the timer ticks HOT 1
- Fix tests HOT 2
- there is no index.min.js in npm package HOT 1
- Dont work with NUXT. HOT 2
- Jest SyntaxError: Unexpected token export HOT 2
- TS7016: Could not find a declaration file for module 'vue-timers' HOT 1
- TypeScript Setup documentation needed HOT 1
- Don't work with component props HOT 4
- How to pass params to method? HOT 1
- Documentation inconsistency: default for `time` HOT 1
- browser support HOT 3
- Error in data(): "ReferenceError: process is not defined" HOT 1
- Feature Request: pause/start timer when the page visibility changes HOT 1
- [Vue warn]: Invalid value for option "timers": expected an Object, but got Array. HOT 3
- Dynamic Timers HOT 2
- Timer creates new instances when switching Tabs HOT 2
- Vue 3 support HOT 2
- How do I get/set the timers globally?
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 vue-timers.