I have a regular Vue.js project (created using v3.0.3) that uses WebSockets. Also in the project root is the /server folder which has the Node.js code that houses the multi-player aspect and socket code.
However, since the folder /server is independent of the /src folder from the Vue.js project, how do I make use of the Vue CLI webpack config and add babel compiling (using Webpack) to appropriately compile both the /src
https://cli.vuejs.org/guide/webpack.html#simple-configuration
I was able to import babel-cli and just compile/run like so:
./node_modules/.bin/nodemon --exec babel-node --presets env,stage-2 server.js
and it worked.
Actually, you should add .babelrc file and declare presets, env options and etc into it.
I don't know why you don't eject, because of access to webpack configuration. In the webpack config, you can declare your src folder or exclude other folders like node_modlules or your custom server folder.
For example, see webpack config for your issue:
module.exports = {
~~~
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: ['node_modules', 'server'],
use: [
{
loader: 'babel-loader',
},
],
},
~~~
And see a sample .babelrc file:
{
"presets": [
"es2015",
"es2016",
"es2017",
"env",
"stage-0"
],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread",
[
"transform-runtime",
{
"helpers": true,
"polyfill": true,
"regenerator": true
}
]
],
"env": {
"development": {
"compact": false
}
}
}
Then you should use your webpack commands to build:
webpack -p --config ./webpack.production.config.js
Related
I have a Gruntfile.js like this.
module.exports = function(grunt) {
require('time-grunt')(grunt);
require('load-grunt-config')(grunt, {
jitGrunt: {
staticMappings: {
scsslint: 'grunt-scss-lint'
}
}
});
grunt.loadNpmTasks('grunt-run');
grunt.registerTask('default', ['eslint', 'jest', 'scsslint', 'svgstore'])
};
And when I run the grunt it says.
grunt
No "eslint" targets found.
eslint is already installed and I even created the configuration file using
./node_modules/.bin/eslint --init
And this is the content of .eslintrc.js.
module.exports = {
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 13
},
"rules": {
}
};
Any opinions?
Depending on how you downloaded the codebase for the theme, it may be missing the "grunt" folder. If your project is missing this folder, try adding the one from Cornerstone: https://github.com/bigcommerce/cornerstone/tree/master/grunt
Per the BigCommerce documentation around eslint errors -- If bundling your theme triggers multiple lint errors related to the bundle.js file, your theme is missing the .eslintignore file.
You can retrieve this file from the Cornerstone repo. Once you add this in, re-run the bundle command.
I'm updating a private node_module that we install in projects via bitbucket. The package has some overrides that get bundled up via webpack and that bundle is used directly (i.e. outside of the build tools used for the project I'm installing the module for).
I would like to fire the module's build command as a postinstall script so that when we install or update the module in the main project the bundle is rebuilt.
In the module's package.json I have this:
"scripts": {
"build": "webpack",
"dev": "webpack --watch",
"serve": "webpack-dev-server",
"postinstall": "npm run build"
},
and I have the following webpack.config.js file:
const path = require("path")
module.exports = {
mode: "development",
watch: false,
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
devServer: {
contentBase: "dist",
},
module: {
rules: [
{
test: /\.js/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env"],
},
},
},
],
},
}
And I've confirmed that firing npm run build works just fine in the modules codebase, but when I go to update the module in the main codebase I get errors:
Webpack is blowing up on the option chaining which I thought would be handled by the babel loader in the module's webpack config.
I double checked my module's package.json file and it definitely has babel's presets in the regular dependencies and not the dev dependencies (i.e. it gets installed as part of the module install).
Am I doing something wrong here? It seems like if the same build process works
Make sure your exports in the package.json points to the sources in the dist:
"exports": {
".": "./dist/bundle.js"
},
https://nodejs.org/api/packages.html#package-entry-points
I have a class where I use some static properties like this:
class Entity {
static LIMIT = 10;
}
So, i can do:
Entity.LIMIT
In order to do that I'm using babel plugin-proposal-class-properties and in my .babelrc I have:
{
"presets": ["#babel/preset-env"],
"plugins": [
["#babel/plugin-proposal-class-properties", { "loose": true }]
]
}
I'm using jest and my test passes using that config. Now I need to use funcionality of Entity class inside a vuejs component. But I got the error:
Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type
I also tried a babel config file in my project root: babel.config.js
module.exports = {
presets: ["#babel/preset-env"],
plugins: [
["#babel/plugin-proposal-class-properties", { "loose": true }]
]
};
But didn't work.
How can i configure vuejs, to make work this babel plugin?
I'm using vue2.6.11 and vue-cli 3
I got this exact same issue when trying to use "importabular" with vuejs (vuejs 2, vue-cli-3). Importabular uses class properties, after some research I found this babel plugins (plugin-proposal-class-properties), I installed it and added it in vue.config.js.
To finally make it work, I had to add "importabular" (or the nested path) in the transpileDependencies: option. Why that? Because, by default, Babel ignores whatever is in node_module, so you have to tell Babel to not ignore this specific folder.
So, if you want to use babel or some babel plugins with some node_module with vue you should modify the vue.config.js as follow :
module.exports = {
transpileDependencies: [
'path/in/node_module',
],
}
and change the babel.config.js as follow:
module.exports = {
"presets": [
"#vue/cli-plugin-babel/preset"
],
"plugins": [
["#babel/plugin-proposal-class-properties"],
]
}
I'm not sure what I'm doing wrong here. I have VueJs 3 with Vuetify. Works great with Chrome and Firefox, but it is not loading in IE and Edge. I am attempting to load polyfills with Babel and forcing Vue CLI to transpile dependencies for Vuetify.
package.json
"babel": {
"presets": [
[
"#babel/preset-env",
{
"useBuiltIns": "entry"
}
]
]
}
vue.config.js
module.exports: {
transpileDependencies: ['vuetify']
}
main.ts
import 'core-js/es6';
import 'regenerator-runtime/runtime';
The imports are included at the top of my main.ts file. I have been using the official documentation to set this up.
What am I missing here?
If you created the project using vue-cli and added vuetify using vue add vuetify, then the solution to make it work in Edge should be to add transpileDependencies: ['vuetify'] to the vue.config.js file.
But in my case I added vue/vuetify to an already existing project and did not use vue-cli. So to make it work I installed core-js npm install core-js#2 --save and added this to the rules in my webpack.config.js
{
test: /\.js$/,
exclude: /node_modules\\(?!(vuetify)).*/,
use: [
{
loader: 'babel-loader',
options: {
configFile: './babel.config.js',
}
}
]
}
Then I added the babel.config.js file to the root of the project.
module.exports = {
presets: [
['#babel/preset-env', {
debug: true,
useBuiltIns: 'usage',
corejs: { "version": 2, "proposals": true }
}],
],
plugins: [
'#babel/plugin-proposal-object-rest-spread',
'#babel/plugin-transform-spread',
]
}
A little late reply, but I couldn't find this solution anywhere else and this was one of the first posts showing up when I was searching for it myself. So I figured I'll post what worked for me here.
I ended up just removing Vuetify (I was only using one feature from it which was easily replaced) and using the babel polyfill cdn. Probably not the best solution but got it working for now.
I'm receiving an error when trying to execute a watch command on webpack and cannot figure out the problem. I have a feeling there's more than one issue, but I'm pretty sure I at least have an idea of one of the problems.
To give a little background, I'm way out of my know-how with all of this and am trying to self-teach how to write a web application with python. I stumbled onto this blog post with a basic example with detailed instructions:
https://codeburst.io/creating-a-full-stack-web-application-with-python-npm-webpack-and-react-8925800503d9
... and getting errors with no context from the source material. They also have a github and youtube video where it was presented, but still no such luck.
I think part of the issue is that their example was written on a MAC which the directory works a little different than windows which is my computer, so in part of the code the directory appears to be off because of that. Here's a screenshot showing the Node.js, the file folder, and the webpack.config.js code:
Here's a screenshot showing the Node.js, the file folder, and the webpack.config.js code:
I noticed that the directory in the example had had '/static/js/index.jsx', but my directory uses the other slash \static\js\index.jsx and the error shows the odd combining as C:\Users...\static/static/js/index.jsx. After learning that \ was an escape code in javascript, I eventually tried the code re-done with the changed slashes.
Here's another screenshot showing the newly run effect ... and it didn't appear to have an effect.
So I'm not sure if what I "fixed" was also an error, but not the current one since it doesn't make sense to me how directory slashes can change... but still no real answers and my knowledge on this was too thin to effectively look it up or learn the nature of the issue.
I have a feeling the actual module either is or may also have some kind of error in the webpack code, but I'm not too sure.
Thanks for any and all time on helping me out,
Matt
Edit: the original post had screenshots of the code and reference to the source material it was copied from, but for reference here are the code segments:
The directory layout is:
| Documents
|--- Python Scripts
|--- fullstacktemplate
|--- fullstack_template
|--- static
|--- js
|--- index.jsx
| node_modules
| index.html
| package.json
| package-lock.json
| webpack.config.js
The node_modules and package-lock.json were auto-created with set up of NPM, Webpack, and/or Babel. Package.json was further edited which will be listed below.
index.jsx is 1 line:
alert("Hello World!");
package.json is as follows:
{
"name": "fullstacktemplate",
"version": "1.0.0",
"description": "fullstack template that will say hello in another language when activated",
"main": "index.jsx",
"scripts": {
"build": "webpack -p --progress --config webpack.config.js",
"dev-build": "webpack --progress -d --config webpack.config.js",
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --progress -d --config webpack.config.js --watch"
},
"keywords": [
"python",
"react",
"npm",
"webpack"
],
"author": "Matt Lane",
"license": "ISC",
"devDependencies": {
"webpack": "^4.28.2"
}
}
webpack.config.js is as follows:
const webpack = require('webpack');
const config = {
entry: __dirname + '\\js\\index.jsx',
output: {
path: __dirname + '\\dist',
filename: 'bundle.js',
},
resolve: {
extensions: ['.js', '.jsx', '.css']
},
module: {
rules: [
{
test: /\.jsx?/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
}
};
module.exports = config;
The webpack.config.js file is my "corrected" one with the \ slashes. The original unedited version was:
const webpack = require('webpack');
const config = {
entry: __dirname + '/js/index.jsx',
output: {
path: __dirname + '/dist',
filename: 'bundle.js',
},
resolve: {
extensions: ['.js', '.jsx', '.css']
},
module: {
rules: [
{
test: /\.jsx?/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
}
};
module.exports = config;