When running lint-staged I get the following error -
This is my lint-staged config file -
module.exports = {
'src/**/*.ts': ['eslint --fix', () => 'tsc --noEmit'],
'**/*.{ts,js,json,yaml}': 'prettier --write',
'**/*': 'inflint -c inflint.config.ts',
};
Related
I am trying to use the library node-pty in a project scaffolded with vue-cli. When I launch the program I get the following error:
error in ./node_modules/node-pty/build/Release/pty.node
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
# ./node_modules/node-pty/lib/index.js 49:49-85
# ./src/background.js
Steps to reproduce
vue create test-project
cd test-project && vue add electron-builder
npm i node-pty#beta
add import pty from 'node-pty’ to src/background.js
npm run electron:serve
What I have attempted
I have attempted to add node-loader and raw-loader to the vue.config.js file
configureWebpack: {
chainWebpack: config => {
config.module
.rule('node')
.test(/.node$/i)
.use('node-loader')
.loader('node-loader')
.end()
}
}
This does not resolve the issue.
vue.config.js requires the use of module.exports
module.exports = {
chainWebpack: config => {
config.module
.rule('node')
.test(/\.node$/)
.use('node-loader')
.loader('node-loader')
.end();
}
}
i'm use create-react-app create project, and after yarn eject, i change webpack.config.js 'entry' propetry, and paths 'module.exports={}', when i yarn start, i get the error 'Cannot read property 'indexOf' of undefined'. i don't know where is mistakes.
env: macos 14
node: v10.13.0
npm: v6.11.3
yarn: 1.15.2
react: v16.9.0
webpack.config.js:
entry: {
index: [
paths.appIndexJs,
isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient')
].filter(Boolean),
query: [
paths.appQueryJs,
isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient')
].filter(Boolean),
order: [
paths.appOrderJs,
isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient')
].filter(Boolean),
ticketPage: [
paths.appTicketPageJs,
isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient')
].filter(Boolean)
},
paths.js
module.exports = {
dotenv: resolveApp('.env'),
appPath: resolveApp('.'),
appBuild: resolveApp('build'),
appPublic: resolveApp('public'),
appHtml: resolveApp('public/index.html'),
// this is new
appQueryHtml: resolveApp('public/query.html'),
appOrderHtml: resolveApp('public/order.html'),
appticketPageHtml: resolveApp('public/ticketPage.html'),
appIndexJs: resolveModule(resolveApp, 'src/index/index'),
appQueryJs: resolveModule(resolveApp, 'src/query/index'),
appTicketPageJs: resolveModule(resolveApp, 'src/ticketPage/index'),
appOrderJs: resolveModule(resolveApp, 'src/order/index'),
// new over
appPackageJson: resolveApp('package.json'),
appSrc: resolveApp('src'),
appTsConfig: resolveApp('tsconfig.json'),
appJsConfig: resolveApp('jsconfig.json'),
yarnLockFile: resolveApp('yarn.lock'),
testsSetup: resolveModule(resolveApp, 'src/setupTests'),
proxySetup: resolveApp('src/setupProxy.js'),
appNodeModules: resolveApp('node_modules'),
publicUrl: getPublicUrl(resolveApp('package.json')),
servedPath: getServedPath(resolveApp('package.json')),
};
i expect running 'yarn start', the react project is ok!
project folder:
(source: labike.xyz)
error:
(source: labike.xyz)
i found the error in paths.js:
module.exports = {
...
appTicketPage: ...
}
i'm write error!
I want to setup a npm script for production build and one for development build. like npm run build for production and npm run buildDev for development.
I have some configurations in each env file like:
ROOT_API: '"url for the production"' and something else in the development env.
The build will be added to the dist folder.
I want the Production Build to be added to the dist folder and the Development Build to be added to a distDev folder.
I have tried to make a copy of the build.js file but without luck.
config/index.js:
'use strict'
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// CSS Sourcemaps off by default because relative paths are
"buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
}
}
config/prod.env.js
module.exports = {
NODE_ENV: '"production"',
ROOT_API: '"url for production"'
}
config/dev.env.js
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
ROOT_API: '"url for development"'
})
build/build.js
'use strict'
require('./check-versions')()
process.env.NODE_ENV = 'production'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
const spinner = ora('building for production...')
spinner.start()
rm(path.join(config.build.assetsRoot,
config.build.assetsSubDirectory), err => {
if (err) throw err
webpack(webpackConfig, function (err, stats) {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n\n')
console.log(chalk.cyan(' Build complete.\n'))
console.log(chalk.yellow(
' Tip: built files are meant to be served over an HTTP
server.\n' +
' Opening index.html over file:// won\'t work.\n'
))
})
})
Any suggestions?
Didn't you try to use vue.config.js file to configure Vue build behavior?
You could specify an outputDir according to process.env.NODE_ENV at vue.config.js.
All environment-specific parameters would be set at .env.development and .env.production files accordingly.
Of course you can modify Webpack config through vue.config.js if you need, examples here.
Output directory parameter changing example is here.
At the end, your configuration file will depend only on environment variables and maybe some logic, e.g.:
module.exports = {
NODE_ENV: process.env.NODE_ENV,
ROOT_API: process.env.VUE_APP_ROOT_API_URL,
ANY_PARAM: process.env.VUE_APP_ANY_DOT_ENV_PARAM,
}
But remember, that your custom .env params should start with VUE_APP_ prefix, if you use them at templates.
Add --mode development entry in your package.json file like this:
I wrote an app using the webpack-boilerplate for vue. The backend handling GET and POST requests is an express-server. IDE is visual studio code.
This is what I did:
$ vue init webpack app
$ cd app
$ npm install
$ npm install axios express body-parser node-sass sass-loader
$ npm install --save-dev concurrently nodemon
app/express/app.js looks like:
//import express from express
var express = require('express')
var app = express()
// sets port 8080 to default or unless otherwise specified in the environment
app.set('port', process.env.PORT || 8080)
var bodyParser = require('body-parser')
app.use(bodyParser.json())
app.use(express.static(`${__dirname}/../dist/`))
// Test: curl -X POST -H "Content-Type: application/json" -d '{"path": "bla/blub.txt"}' http://localhost:8081/api/save
app.post('/api/save', function (req, res) {
response = {
msg: 'okay',
data: Math.floor(Math.random() * 10)
};
res.end(JSON.stringify(response))
})
var server = app.listen(app.get('port'), function () {
var host = server.address().address
var port = server.address().port
console.log("Example app listening at http://%s:%s", host, port)
})
I modified the boilerplate code generated by vue init webpack such that app/components/HelloWorld.vue is:
<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
import Axios from 'axios'
const baseUrl = "http://127.0.0.1:8080/api"
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
async created() {
this.msg = await Axios.post(`${baseUrl}/save`, {"path": "bla/blub.txt"})
.then(response => new Promise(resolve => {
let msg = response.data.msg
resolve(msg)
}))
.catch(error => {
console.log(error)
Promise.reject(error)
})
}
}
</script>
<style lang="scss" scoped>
h1 {
font-weight: normal;
}
</style>
To start development in one command (npm start go) and allow hot reloading, I changed app/package.json (don't know where I copied that from):
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"apiserver": "PORT=8081 nodemon express/app.js",
"go": "concurrently --kill-others \"npm run dev\" \"npm run apiserver\"",
"start": "npm run dev",
"build": "node build/build.js"
},
To start the dev version of the app, I ran:
$ npm run dev # webpack-dev-server starts on port 8080, express on 8081
To avoid CORS-problems, webpack can be configured to proxy express requests. Change app/config/index.js:
proxyTable: {
'/api':{
target: 'http://localhost:8081',
changeOrigin: true,
}
},
One can now run npm run dev from app/ again, everything works fine.
Hence, over to production mode. I run
$ npm run build
$ node express/app.js
Everything runs fine.
(Over time, I added answers found by myself into this question... The original question was: "Configure webpack for vue frontend and express backend (scenario both production and development)")
My question is now:
How to change webpack babel setup such that the node-run file app.js uses ECMA2016 (such that import express from express can be used instead of require ...)?
Thanks for any help!
I have a Vue application that's compiled using Webpack. I'm trying to add a variable into the 'npm run dev' command that I can then use globally throughout the project. Currently, I am running 'npm --brand=foo run dev' and consoling 'process.env.brand' in the build.js file returns 'foo'. Now I need to make this available to the rest of the project. Here is my setup:
WEBPACK.DEV.CONF.JS
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
module.exports = merge(baseWebpackConfig, {
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
})
})
DEV.ENV.JS
var merge = require('webpack-merge')
var prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})
File structure is Build/build.js + webpack.dev.conf.js and Config/dev.env.js. I tried to add a 'brand' property like the following, but process.env.brand was undefined in this file.
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
brand: process.env.brand
})
UPDATE by #Linx to pass the argument dynamically directly from
command line
Run the command and pass in the variable like: npm --brand=foo run dev
Then, variable is then available in the webpack config file as
process.env.npm_config_brand.
Another option is to setting the variable inside the npm script section:
package.json
{
//...
"scripts": {
"dev": "SET brand=foo& webpack -p"
},
If you are using linux, maybe you should remove the SET --> "dev": "brand=foo& webpack -p"
Then run the command like: npm run dev
In both cases, to make it available for the rest of the project you can use webpack.DefinePlugin
module.exports = {
//...
plugins: [
new webpack.DefinePlugin({
'__BRAND__': process.env.brand,
})
]
}
The variable will be accessible in the rest of the project like: console.log(__BRAND__);