I am trying to create reusable react components that I would like to publish to NPM registry.
The project folder contains the following files and folders:
The dist folder contains the output files and folders from src. As you can recognize, I am using RollupJS as a module bundler.
The question is when I publish the project to NPM registry, it is enough to publish only the dist folder, or do I have to publish all files and folders?
// rollup.config.js
import typescript from 'rollup-plugin-typescript2';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import { nodeResolve } from '#rollup/plugin-node-resolve';
import setting from "./package.json";
export default {
input: "./src/index.tsx",
output: {
file: setting.main,
format: "es",
},
plugins: [typescript(), peerDepsExternal(), nodeResolve()]
};
The content of package.json file:
{
"name": "#example/components",
"version": "0.1.0",
"description": "React components",
"main": "./dist/index.js",
"module": "./dist/index.es.js",
"author": "anujit marty",
"license": "MIT",
"scripts": {
"build": "rollup --config"
},
"devDependencies": {
"#rollup/plugin-babel": "^5.3.0",
"#rollup/plugin-node-resolve": "^11.2.1",
"#types/react": "^17.0.3",
"#types/react-dom": "^17.0.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"rollup": "^2.44.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-typescript2": "^0.30.0",
"tslib": "^2.1.0",
"typescript": "^4.2.3"
},
"peerDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}
Pushing dist to npm is enough. After you run the build command, all the files that are required for the package to run properly, are compiled into the dist folder, thus removing the need to push the entire project.
Related
I've built a simple React/Redux app and am using Parcel for the bundler. It works fine in development mode, that is, using the script
"dev": "parcel ./src/index.html",
but when I tried to do
"build": "parcel build ./src/index.html",
I got the following error
/Users/abc/Documents/Projects/sandbox/smart/src/styles/main.scss: Cannot find module 'sass' from '/Users/abc/Documents/Projects/sandbox/smart/src/styles'
at /Users/abc/Documents/Projects/sandbox/smart/node_modules/resolve/lib/async.js:97:35
at processDirs (/Users/abc/Documents/Projects/sandbox/smart/node_modules/resolve/lib/async.js:244:39)
at isdir (/Users/abc/Documents/Projects/sandbox/smart/node_modules/resolve/lib/async.js:251:32)
at /Users/abc/Documents/Projects/sandbox/smart/node_modules/resolve/lib/async.js:23:69
at FSReqWrap.oncomplete (fs.js:152:21)
This is the first time I've tried to build an app using Parcel and I'm lost. I'm using node-sass to import my sass files directly -- perhaps this has something to do with that.
The referenced file (main.scss) is referenced in App.js like this
import "../../styles/main.scss";
and is the first sass file to be included (App is loaded into the DOM like this in index.js:
const store = configureStore()
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
)
This is running under Node 11.15. My package.json follows -- any hints or help much appreciated!
{
"name": "friender",
"version": "1.0.0",
"description": "",
"main": "index.js",
"jest": {
"setupFiles": ["jest-localstorage-mock"]
},
"scripts": {
"dev": "parcel ./src/index.html",
"build": "parcel build ./src/index.html",
"lint": "eslint \"src/**/*.{js,jsx}\" --quiet",
"test": "jest"
},
"prettier": {
"semi": false
},
"keywords": [],
"author": "",
"license": "MIT",
"devDependencies": {
"#babel/cli": "^7.6.0",
"#babel/core": "^7.6.0",
"#babel/plugin-transform-runtime": "^7.5.5",
"#babel/preset-env": "^7.6.0",
"#types/jest": "^24.0.18",
"babel-eslint": "^10.0.3",
"babel-preset-react": "^7.0.0-beta.3",
"eslint": "^6.2.2",
"eslint-config-prettier": "^6.1.0",
"jest": "^24.9.0",
"jest-localstorage-mock": "^2.4.0",
"parcel-bundler": "^1.12.3",
"prettier": "^1.18.2"
},
"dependencies": {
"#emotion/babel-preset-css-prop": "^10.0.14",
"#emotion/core": "^10.0.16",
"#emotion/styled": "^10.0.15",
"#fortawesome/fontawesome-svg-core": "^1.2.0-7",
"#fortawesome/free-solid-svg-icons": "^5.11.1",
"#fortawesome/react-fontawesome": "^0.1.4",
"axios": "^0.19.0",
"bulma": "^0.7.5",
"eslint-plugin-jest": "^22.17.0",
"eslint-plugin-react": "^7.14.3",
"immer": "^4.0.0",
"node-sass": "^4.12.0",
"prop-types": "^15.7.2",
"react": "16.x",
"react-detect-offline": "^2.4.0",
"react-dom": "^16.9.0",
"react-fontawesome": "^1.6.1",
"react-modal": "^3.10.1",
"react-redux": "^7.1.1",
"redux": "^4.0.4",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0"
}
}
Try instead per the documentation for SCSS and error Cannot find module 'sass' use module sass instead of node-sass:
npm install -D sass
The documentation mentions being able to use node-sass, but there are several active issues with node-sass. Module sass may help resolve the error and allow you use SCSS in your application.
Hopefully that helps!
I cracked open an experimental express project I hadn't touched for a couple of months, and I tried to trace through how everything works to refresh my understanding.
What confuses is me is that my express app is run from a file called server.js, but that is not specified anywhere in my package.json, nor is there any reference to such a filename (like as a default) in the node_modules folder for express. It works though, unless I rename the file (e.g. server_.js). I have no scripts setup in package.json. Whatever I specify for "main" in package.json seems to have no effect.
So how does npm start know to run the app from server.js?
{
"name": "my thing",
"version": "0.0.1",
"description": "This is my thing.",
"main": "index.js",
"scripts": {
"test": "test"
},
"repository": {
"type": "git",
"url": "my-thing"
},
"author": "Faust",
"license": "ISC",
"dependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"material-ui": "^1.0.0-beta.4",
"material-ui-icons": "^1.0.0-alpha.19",
"express": "^4.15.4",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-redux": "^5.0.5",
"react-router": "^4.1.2",
"react-router-dom": "^4.1.2",
"redux": "^3.7.2",
"webpack": "^3.3.0"
}
}
ls of the root:
data/ entry.jsx node_modules/ npm-debug.log package.json public/ server.js src/ webpack.config.js
From the official NPM docs -
npm start runs an arbitrary command specified in the package's "start" property of its "scripts" object. If no "start" property is specified on the "scripts" object, it will run node server.js.
Read more here.
I have created an ember addon which relies on gulp derived packages to build, so in the addon it has the following in package.json.
When the addon is included in the main application, the build fails due to the various gulp modules being missing. The addon is in the devDependencies section of the main application.
The addon also builds into the main application when it is in through npm link. My question is how should the addon dependencies be handled so the main application builds without a local copy of the module?
Update: I think the problem is that the package does a gulp build after the postinstall which elevates the gulp devDependencies into real dependencies. Is this correct?
Addon JSON file
{
"name": "My Addon",
"version": "0.0.0",
"description": "The default blueprint for ember-cli addons.",
"directories": {
"doc": "doc",
"test": "tests"
},
"scripts": {
"build": "ember build",
"start": "ember server",
"test": "ember try:each",
"postinstall": "gulp build && bower install"
},
"repository": {
"type": "git",
"url": "git://github.com/myaddon.git"
},
"engines": {
"node": ">= 0.12.0"
},
"author": "",
"license": "MIT",
"devDependencies": {
"bootstrap": "^4.0.0-alpha.5",
"broccoli-asset-rev": "^2.4.5",
"broccoli-funnel": "^1.0.9",
"ember-ajax": "^2.4.1",
// more ember modules
"find-root": "^0.1.1",
"font-awesome": "^4.7.0",
"glob": "^4.5.3",
"gulp": "^3.9.1",
"gulp-clean-css": "^2.2.1",
"gulp-concat": "^2.6.0",
"gulp-connect": "^2.2.0",
"gulp-filter": "^3.0.1",
"gulp-git": "^1.4.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.3.2",
"gulp-sourcemaps": "^1.5.2",
"gulp-task-loader": "^1.2.1",
"gulp-template": "^3.0.0",
"gulp-uglify": "^1.2.0",
"gulp-zip": "^3.0.2",
"lazypipe": "^1.0.1",
"loader.js": "^4.0.10",
"run-sequence": "^1.1.2"
},
"keywords": [
"ember-addon"
],
"dependencies": {
"ember-cli-babel": "^5.1.7"
},
"ember-addon": {
"configPath": "tests/dummy/config"
}
}
The addon's dependencies are needed to build application (that includes addon), should be listed in dependencies section. The devDependencies of a package that is included as dependency of another package, are ignored.
There is other solution to add packages into an application. You can create a blueprint in your addon that will be called every time an application build with it or install it.
I'm making a web server with Node.JS and use Travis-Ci to check my code. Yhe problem I got is when I commit my code, Travis gives error below, but the code compiles without an error on my pc:
./backend/server.js: 1: Syntax error: ( unexpected
Here you could find my .travis.yml file:
install:
- npm install
- npm install -g bower
- bower install bootstrap
- bower install socket.io
language: node_js
node_js:
- "6.9"
before_script:
- chmod 0777 ./backend/server.js
cache:
directories:
- node_modules
- bower_components
and the package.json
{
"name": "watchfriends",
"version": "0.0.0",
"description": "Front-end and back-end project watchfriends",
"main": "gulpfile.js",
"scripts": {
"test": "./backend/server.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/WatchFriends/Backend.git"
},
"author": "Hein P., Jasper D., Michiel V., Michiel Z.",
"license": "ISC",
"bugs": {
"url": "https://github.com/WatchFriends/Backend/issues"
},
"homepage": "https://github.com/WatchFriends/Backend#readme",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-clean-css": "^2.0.13",
"gulp-concat": "^2.6.1",
"gulp-csslint": "^1.0.0",
"gulp-htmlhint": "^0.3.1",
"gulp-jshint": "^2.0.4",
"gulp-notify": "^2.2.0",
"gulp-sass": "^2.3.2",
"gulp-sourcemaps": "^2.2.0",
"gulp-uglify": "^2.0.0",
"jshint-stylish": "^2.2.1"
},
"dependencies": {
"socket.io": "^1.5.1"
}
}
On this gist, you could find my code, including the log.
Did I something wrong?
Thanks in advance.
Travis runs npm test when testing your code.
If you check inside of your "package.json" file then you can see that the test script is set to run ./backend/server.js. You need to run the node file with node.
Change that to node ./backend/server.js and hopefully that'll work.
I am fairly new to front end development and am working through Brian Noyes Aurelia Fundamentals course
I have installed the following;
node-v4.4.4x64
Git-2.8.2-64
Also I ran
npm install jspm --save-dev
and had this result
When I ran
npm install =g jspm gulp http-server
I got messages saying that the following are deprecated.
graceful-fs#3.0.8 and lodash#1.0.2
then when I ran
jsm init
I got an error
The package.json file is
{
"jspm": {},
"devDependencies": {
"jspm": "^0.16.34"
}
}
How do I fix this error?
Credit to user danzinator on github.
The fix:
Adding in the "registry": "npm" line to Package.json (even though the documentation says by default this registry should be used?)
{
"jspm": {
"registry": "npm",
"directories": {
"baseURL": "wwwroot",
"packages": "jspm_packages"
},
"devDependencies": {
"babel": "babel-core#^5.8.22",
"babel-runtime": "^5.8.20",
"browser-sync": "^2.9.3",
"core-js": "^1.1.0",
"gulp": "^3.9.0",
"gulp-tslint": "^3.2.0",
"jspm": "^0.16.2"
}
},
"devDependencies": {
"jspm": "^0.16.2",
"gulp": "^3.9.0",
"gulp-tslint": "^3.2.0",
"browser-sync": "^2.9.3"
}
}