I'm using parcel to build my project on windows , and installed karma as my test runner. I hope when I changed my source code the parcel would rebuild the project and the karma would execute the test.so I add
"script": {
"dev-test": "parcel watch test/* --no-cache & karma start --auto-watch"
}
to my package.json.
The weird thing is when I run "npm run dev-test" , the parcel build the project but karma didn't excute any test, terminal shows "√ Built in 5.95s.", that's all I got.
I have to type the whole command "parcel watch test/* --no-cache & npx karma start --auto-watch" in my command line line(karma isn't installed globally so I have to add npx), it seems to be a workaround, but still have a bug("&" means parcel and karma runs simultaneously so karma would run the test several times when parcel is building project)
I don't want to type the whole command , I hope I can use npm script.
here's my package.json if it helps
{
"name": "custom-vue-component",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "parcel build test/* --no-cache --no-minify && karma start --single-run",
"dev-test": "parcel watch test/* --no-cache & karma start --auto-watch"
},
"repository": {
"type": "git",
},
"author": "me",
"license": "ISC",
"dependencies": {
"vue": "^2.6.11",
"vue-hot-reload-api": "^2.3.4"
},
"devDependencies": {
"#vue/component-compiler-utils": "^3.1.2",
"chai": "^4.2.0",
"chai-spies": "^1.0.0",
"karma": "^5.0.9",
"karma-chai": "^0.1.0",
"karma-chai-spies": "^0.1.4",
"karma-chrome-launcher": "^3.1.0",
"karma-mocha": "^2.0.1",
"karma-sinon-chai": "^2.0.2",
"mocha": "^7.2.0",
"parcel-bundler": "^1.12.4",
"sass": "^1.26.7",
"sinon": "^9.0.2",
"sinon-chai": "^3.5.0",
"vue-template-compiler": "^2.6.11"
},
"alias": {
"vue": "./node_modules/vue/dist/vue.common.js"
}
}
and karma.conf.js
module.exports = function(config) {
config.set({
basePath: "",
frameworks: ["mocha", "sinon-chai"],
client: {
chai: {
includeStack: true,
},
},
files: ["dist/**/*.test.js", "dist/**/*.test.css"],
exclude: [],
preprocessors: {},
reporters: ["progress"],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ["ChromeHeadless"],
singleRun: false,
concurrency: Infinity,
});
}
If you are Windows user, you maybe meet this problem.
You can solve it by run parcel watch test/* --no-cache & karma start separately:
Open a git bush window and run npx parcel watch test/* --no-cache
Open another git bush window and run npx karma start
Related
Not able to load vue in docker container, using parcel.
Vue is not loaded, and vue devtools cant find vue. All files seems to be in devtools/sources.
Its working outside of docker with npm run dev.
JS error:
Uncaught TypeError: Cannot read property 'props' of undefined
at vue.common.prod.js:6
Dockerfile:
# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package.json /app
RUN apk add --update npm
RUN apk add util-linux
ENV FONTAWESOME_NPM_AUTH_TOKEN XXXXX
COPY .npmrc /app
RUN npm install
RUN npm audit fix
COPY src/. /app/src
COPY index.html /app
RUN npm run production
# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
package.json
{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"alias": {
"vue": "/node_modules/vue/dist/vue.common.js"
},
"scripts": {
"dev": "parcel index.html",
"production": "parcel build index.html"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#fortawesome/fontawesome-pro": "^5.15.1",
"axios": "^0.21.1",
"bootstrap": "^4.5.3",
"bootstrap-vue": "^2.21.2",
"faker": "^5.1.0",
"jquery": "^3.5.1",
"lodash": "^4.17.20",
"moment": "^2.29.1",
"vue": "^2.6.12",
"vue-hot-reload-api": "^2.3.4",
"vue-router": "^3.4.9"
},
"devDependencies": {
"#vue/component-compiler-utils": "^3.2.0",
"parcel-bundler": "^1.12.4",
"sass": "^1.32.2",
"vue-template-compiler": "^2.6.12"
}
}
I think I can probably get your dev server going.
I think parcel's default port is 1234. So you need to tell it to be on port 80. Also hot-reloading wont work unless you specify and expose the ws port that it
Change your package parcel run command like so.
{
...
"scripts": {
"dev": "parcel index.html -p 80 --hmr-port 33333",
},
}
Then add this to your Dockerfile
...
EXPOSE 33333
That should allow parcel to connect to the parcel dev server
I'm developing a svelte+tailwind+PHP site with rollup.js. How can I set a variable in the svelte source files depending on if I'm running npm run dev or npm run build? I'd like the different builds to connect to different back-end servers.
This is my package.json in case that's relevant. I'm new to most of these tools, so please bear with me and correct me if I've misunderstood too much. After running npm run build, I run a script that scp's the build folder to the production server.
{
"name": "my-app",
"version": "1.0.0",
"scripts": {
"watch:tailwind": "postcss public/tailwind.css -o public/index.css -w",
"build:tailwind": "NODE_ENV=production postcss public/tailwind.css -o public/index.css",
"dev": "run-p autobuild watch:tailwind",
"build": "npm run build:tailwind && rollup -c",
"start": "sirv public --single --host",
"start:dev": "sirv public --single --dev",
"autobuild": "rollup -c -w"
},
"devDependencies": {
"#rollup/plugin-commonjs": "^16.0.0",
"#rollup/plugin-node-resolve": "^10.0.0",
"autoprefixer": "^10.0.4",
"d3-interpolate": "^2.0.1",
"npm-run-all": "^4.1.5",
"postcss": "^8.1.10",
"postcss-cli": "^8.3.0",
"postcss-nested": "^5.0.1",
"postcss-reporter": "^7.0.2",
"rollup": "^2.3.4",
"rollup-plugin-css-only": "^3.0.0",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-svelte": "^7.0.0",
"rollup-plugin-terser": "^7.0.0",
"svelte": "^3.0.0",
"svelte-dnd-action": "^0.6.22",
"svelte-loading-spinners": "^0.1.1",
"tailwindcss": "^2.0.1"
},
"dependencies": {
"sirv-cli": "^1.0.0"
}
}
You can use #rollup/plugin-replace:
A Rollup plugin which replaces strings in files while bundling.
plugins: [
replace({
// alternatively, one could pass process.env.NODE_ENV or 'development` to stringify
'process.env.NODE_ENV': JSON.stringify('production')
})
]
I'm trying to deploy my portfolio website using AWS S3, CloudFront, CodePipeline, and Travis CI.
Everything works fine, but Travis CI build keeps failing.
gatsby build gives me an error with:
error #98123 WEBPACK
Generating JavaScript bundles failed
This question is very similar to mine, but the solution was irrelevant to mine because I don't have yarn file and I tried reinstalling my npm dependencies.
Here is the copy of my logs:
Generating JavaScript bundles failed
Can't resolve '../components/Layout' in '/home/travis/build/stomg7969/react-portfolio/src/pages'
File: src/pages/index.js
See our docs page for more info on this error: https://gatsby.dev/issue-how-to
error #98123 WEBPACK
Generating JavaScript bundles failed
Can't resolve '../components/Layout' in '/home/travis/build/stomg7969/react-portfolio/src/pages'
File: src/pages/404.js
See our docs page for more info on this error: https://gatsby.dev/issue-how-to
The command "gatsby clean && gatsby build" exited with 1.
store build cache
Done. Your build exited with 1.
And here is my package.json.
"name": "gatsby-starter-spectral",
"version": "0.0.1",
"description": "Gatsby.js V2 starter template based on Spectral by HTML5 UP",
"repository": {
"type": "git",
"url": "git+https://github.com/anubhavsrivastava/gatsby-starter-spectral.git"
},
"author": {
"name": "Anubhav Srivastava",
"email": "anubhav.srivastava00#gmail.com"
},
"dependencies": {
"gatsby": "^2.13.39",
"gatsby-plugin-manifest": "^2.2.3",
"gatsby-plugin-offline": "^2.1.0",
"gatsby-plugin-react-helmet": "^3.0.12",
"gatsby-plugin-sass": "^2.0.11",
"node-sass": "^4.12.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-helmet": "^5.2.1",
"react-images": "1.0.0",
"react-scrollspy": "^3.4.0",
"smoothscroll-polyfill": "^0.4.4"
},
"scripts": {
"develop": "gatsby develop",
"build": "npm run clean && gatsby build",
"deploy": "npm run clean && gatsby build --prefix-paths && gh-pages -d public",
"serve": "gatsby serve",
"clean": "rimraf .cache public",
"format": "prettier --write '**/*.js'",
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {
"gh-pages": "^2.0.1",
"prettier": "^1.17.0",
"rimraf": "^2.6.3"
},
"keywords": [
"gatsby",
"gatsby-starter",
"gatsby-starter-spectral"
],
"license": "MIT",
"bugs": {
"url": "https://github.com/anubhavsrivastava/gatsby-starter-spectral/issues"
},
"homepage": "https://github.com/anubhavsrivastava/gatsby-starter-spectral#readme"
}
Lastly, this is my .travis.yml file.
language: node_js
node_js:
- 11.8.0
install: npm install
script: gatsby clean && gatsby build
deploy:
provider: s3
access_key_id: $AWS_KEY
secret_access_key: $AWS_SECRET
bucket: 'thedevelopark.com'
skip_cleanup: true
acl: public_read
local_dir: public
Thank you in advance for your feedback.
I've had the same problem and tried and checked case-sensitivity a thousand times. Wouldn't do anything.
Then I changed the name of the component in all areas, filename, import, export, you name it. Now it works.
I don't know if Netlify had a problem with my component's name "Socials"? Guess I'll never find out.
say I've go this scaffolding : https://github.com/vuejs/vue-cli
I want to add Webpack 3.8.1 to it.
there's already a "build" folder with lots of webpack files in it :
but (one of) the issue(s) is running "webpack" in the project's root returns :
https://webpack.js.org/concepts/ this si the doc I'm supposed to go by.
there's no real example.
it's got :
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};
which I adapted to the best of my ability to :
const path = require('path');
module.exports = {
entry: './src/entry.js',
output: {
path: path.resolve(entry, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};
I also added a entry.js file containing nothing under src :
and I edited my package.json file to include:
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"node-sass": "^4.5.3",
"sass-loader": "^3.2.3",
"style-loader": "^0.19.0",
"extract-text-webpack-plugin": "^3.0.1"
},
"devDependencies": {
"sinon": "^4.0.1",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.3",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
and ran :
npm install
npm update
I feel I'm getting somewhat close but I still cannot manage to use the new webpack.
I put my comment as answer to be able to close this question and (hopefuly) help others future users.
I think that your problem is to try to use webpack, you should use the npm run script like: npm run dev or npm run prod, and then the vue+webpack will do the work for you, placing the files where the config says (webpack.base.dev.conf for instance).
If you take a look at package.json, you could see this part:
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
},
Every one can be executed with npm run X.
Hope it helps!
I am a java developer for years and just new to the js world. This question sounds stupid but I don't know what's the proper/best way to build a dist for reactjs app for deploying to production(nginx/apache).
From my understanding, the dist just like simple web app and should looks like
contains:
index.html
client.js (bundled js after compiled)
static files, e.g.
images, css, js libraries, etc
I follow the guide on:
https://github.com/learncodeacademy/react-js-tutorials/tree/master/1-basic-react
and have a simple web app(maybe this is not called web app) running by:
npm run dev
it uses webpack to bundles the client.js.min and deploy to a embedded web server by node(maybe i am wrong).
Question:
How to build all the things by a command, say "npm run build" and it should built everything in a folder called "dist". So I can deploy it to web server root by copying every in dist to the web root.
package.json
{
"name": "react-tutorials",
"version": "0.0.0",
"description": "",
"main": "webpack.config.js",
"dependencies": {
"babel-core": "^6.17.0",
"babel-loader": "^6.2.0",
"babel-plugin-add-module-exports": "^0.1.2",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.3.13",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.1"
},
"devDependencies": {},
"scripts": {
"dev": "webpack-dev-server --content-base src --inline --hot",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
webpack.config.js
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: path.join(__dirname, "src"),
devtool: debug ? "inline-sourcemap" : false,
entry: "./js/client.js",
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
}
}
]
},
output: {
path: __dirname + "/src/",
filename: "client.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
In your scripts dictionary of package.json add the following
"build" : "NODE_ENV='production' && node_modules/.bin/webpack -p"
This will tell webpack to read the config file and build it in production mode i.e minify etc etc. The -p flag does it. The node env is to ensure that production build are used for react and other libraries and to set an env variable of production for NODE_Env
To run type. npm run build