This is my first time using browserify. I am trying to use the backbone-syphon library (https://github.com/marionettejs/backbone.syphon) in my sails.js/Gulp/Browserify/Backbone project.
My package.json has this
"browser": {
"backbone.syphon": "./assets/js/lib/backbone-syphon/backbone.syphon.js",
"bootstrap": "./node_modules/bootstrap/dist/js/bootstrap.js",
"jQuery": "./node_modules/jquery/dist/jquery.min.js"
},
"browserify": {
"transform": [
"browserify-shim"
]
},
"browserify-shim": {
"bootstrap": {
"exports": "bootstrap",
"depends": [
"jquery:jQuery"
]
},
"backbone.syphon": {
"exports": "Backbone.Syphon",
"depends": [
//"backbone:Backbone" //Tried only this also
"backbone:Backbone", "jquery:jQuery", "underscore:_"
]
}
},
I do not get any errors during startup. But when I try to use "Backbone.Syphon" anywhere in the code it gives an undefined error.
I have explicitly added require('lib/backbone-syphon/backbone.syphon.js') in my code though I am not sure if that is necessary or not.
What am I missing?
Using the latest syphon library works correctly with browserify. Not sure why the old one was not working.
Should have tried this before posting the question.
Related
First of all, some facts:
Node.js requires that all local imports include the imported module's extension (e.g. import hello from './hello.js', not import hello from './hello').
TypeScript will compile imports with or without the .js extension, which means a missing .js extension is a runtime error.
TypeScript doesn't transform imports to add the .js extension or convert .ts to .js.
In my Node.js project, I want to make missing a missing .js extension be a build-time error using the import/extensions ESLint rule. However, when I enable this rule using the following configuration:
{
"root": true,
"env": {
"node": true
},
"parser": "#typescript-eslint/parser",
"plugins": [
"#typescript-eslint"
],
"extends": [
"eslint:recommended",
"plugin:import/recommended",
"plugin:import/typescript",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended"
],
"settings": {
"import/resolver": {
"typescript": {},
"node": {
"extensions": [".js"]
}
}
},
"rules": {
"import/extensions": ["error", "ignorePackages"]
}
}
running eslint gives me the following error:
/sandbox/src/index.ts
1:19 error Missing file extension "ts" for "./hello.js" import/extensions
Source files:
// index.ts
import hello from "./hello.js";
hello();
// hello.ts
export default function hello() {
console.log("Hello");
}
CodeSandbox link: https://codesandbox.io/s/elated-germain-13glp7
I fixed this with the following config:
{
"root": true,
"env": {
"node": true
},
"extends": [
"eslint:recommended",
"plugin:import/recommended",
"plugin:import/typescript",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended"
],
"rules": {
"import/extensions": ["error", "ignorePackages"],
"import/no-unresolved": "off"
}
}
The main thing is to disable the "import/no-unresolved" rule and remove "settings"."import/resolver"."node". ("import/no-unresolved" is redundant as unresolved imports are resolved at the compilation stage.) Other items removed here were already being added as a result of extending the #typescript-eslint plugins.
I found an eslint plugin that can fix missing .js extensions for imports in .ts files, instead of just showing an error:
https://github.com/AlexSergey/eslint-plugin-file-extension-in-import-ts
https://www.npmjs.com/package/eslint-plugin-file-extension-in-import-ts
Install:
npm i -D eslint-plugin-file-extension-in-import-ts
Add to .eslintrc file:
{
"plugins": [
"file-extension-in-import-ts"
],
"rules": {
"file-extension-in-import-ts/file-extension-in-import-ts": "error"
}
}
NOTE: I ran into an issue similar to https://github.com/import-js/eslint-plugin-import/issues/1292 when using this package, and it will incorrectly try to add .js extensions on these paths when fixing automatically.
You could try ts-add-js-extension package to append .js extension to the transpiled JavaScript files. After you install you can do
ts-add-js-extension add --dir={your-transpiled-outdir}
It's been a while since I started a nodejs project from scratch, so was a bit of a headscratcher to set up and configure eslint, babel etc.
right now my babelrc is :
{
"presets": [
[
"env",
{
"targets": {
"node": "10"
}
}
]
],
"plugins": [
[
"transform-runtime",
{
"regenerator": true
}
]
]
}
package.json has dev dependencies:
"babel-cli": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
Now I want to loop over a list of objects. For each, I need to perform some asynchronous tasks that I'll need to await on, so I did:
for await (const thing of things) {
const foo = await doSomethingThatTakesAwhile(thing)
// etc
}
but when I run it in dev (nodemon via babel-node) now there's a syntax error on the await:
for await (const thing of things) {
^
Syntax Error Unexpected token, expected (
at Parser.pp$5.raise (... \node_modules\babylon\lib\index.js:4454:13)
at Parser.pp.unexpected (... \node_modules\babylon\lib\index.js:1761:8)
at Parser.pp.expect (... \node_modules\babylon\lib\index.js:1749:33)
at Parser.pp$1.parseForStatement (... \node_modules\babylon\lib\index.js:2008:8)
etc..
Do I have to change my babel config, and/or have I completely misunderstood for/await and await/async ?
I found another project in which i know for await of works... it looks like I'm using old babel plugins and not the new, separated out #babel/xxx libs. After trial and error installing and uninstalling stuff: this is the resulting babelrc that worked:
{
"presets": [
[
"#babel/preset-env",
{
"targets": {
"node": "10"
}
}
]
],
"plugins": [
[
"#babel/plugin-transform-runtime",
{
"regenerator": true
},
"#babel/preset-env"
]
]
}
By this point I had installed all of:
#babel/core
#babel/node
#babel/cli
#babel/preset-env
#babel/plugin-transform-runtime
Then I ran into this issue: https://github.com/meteor/meteor/issues/10128
So Had to also install #babel/runtime pegged at 7.0.0-beta.55 ... and now it builds!!
I believe you need the babel-plugin-proposal-async-generator-functions plugin to use the for await of syntax.
I get the following error after upgrading to Jest v20 where they removed the automatic babel-polyfill due to memory leaks:
TypeError: Object.values is not a function
I realize I need to polyfill this on my own now, I am using babel-preset-env and have the following .babelrc file:
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
},
"test": {
"presets": [
"react",
"stage-3",
["env", {
"targets": {
"browsers": [
"firefox >= 36",
"chrome >= 38",
"opera >= 25",
"safari >= 9",
"ios >= 9"
],
"node": "6.11.4"
},
"useBuiltIns": "usage",
"include": ["es7.object.values"],
"debug": true
}],
"jest"
],
"plugins": [
"transform-class-properties"
],
}
}
I can see that es7.object.values is being polyfilled in the debug output:
Using polyfills:
...
es7.object.values {"chrome":"38","firefox":"36","ios":"9","safari":"9","node":"6.11.4"}
But I am still getting the error message, help!
Some of the options are:
bump node version to the one supporting Object.values (which
seems to be 7.0 judging from this answer),
polyfill it using babel-polyfill (via import 'babel-polyfill' in setupTests.js file).
In my case, the Node version was the reason.
I just updated the node 6 to node 7 and it fixed.
I am wrtiting a project using TypeScript, Jest and the ts-jest NPM module.
When I run my test, I do get some amount of coverage, but the HTML report is not quite right:
Furthermore, some functions are being marked as untested even though they are certainly being called.
My package.json is set as follows:
{
"jest": {
"transform": {
".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
},
"testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
"moduleFileExtensions": [
"ts",
"tsx",
"js"
],
"testResultsProcessor": "<rootDir>/node_modules/ts-jest/coverageprocessor.js",
"collectCoverage": true,
"collectCoverageFrom": [
"src/**/*.{ts,tsx}"
],
"coverageReporters": [
"html",
"json"
]
}
}
Is something wrong with my configuration?
UPDATE
Starting from jest#20 you can pass mapCoverage option and use coverage/lcov-report/index.html file.
OLD
I also have been struggling with this problem, but then I notice that line.
Long story short - coverage reports goes to coverage/remapped/html/index.html file.
I have some qunit tests setup to test my code that extensively uses requirejs. I use Chutzpah to perform the test running within VS. Everything works fine if I run the tests in the browser but not from within VS only. It seems to be ignoring my require.config call. If I change my references in my files to not point to shims but directly to files, it will work, but that breaks other things within my code.
Does anyone have this working? If so, how? I have looked at their example code but it doesn't use require.config and shims.
Start from this tutorial.
To run a config, with shims, just add a reference to your config file in chutzpah.json. Example below, slightly simplified for readability.
The chutzpah.json file
{
"Framework": "qunit",
"TestHarnessReferenceMode": "AMD",
"TestHarnessLocationMode": "SettingsFileAdjacent",
"References": [
{ "Path": "../Scripts/Components/RequireJS/require.js" },
{ "Path": "config.js" }
]
}
The config.js file
require.config({
"paths": {
"jquery": "../Scripts/jquery-2.1.4",
"jquery-linq": "../Scripts/jquery.linq",
"signalr": "../Scripts/jquery.signalR-2.2.0",
"signalrhubs": "../Scripts/mock-signalr-hubs",
"knockout": "../Scripts/knockout-3.3.0",
"constants": "../Scripts/constants",
"HomeVm": "Source/HomeVm"
},
"shim": {
"jquery.linq": {
"deps": ["jquery"]
},
"bootstrap": {
"deps": ["jquery"]
},
"signalr": {
"deps": ["jquery"]
}
}
});