Comments (7)
Update
I think the issue is that all of the loaders mentioned in the readme are supposed to return strings. With React Templates, I'm really trying to return a Javascript function. With the following webpack configuration,
module.exports = {
output: {
libraryTarget: 'commonjs'
},
module: {
loaders: [
{
test: /\.template\.html$/,
loaders: ["raw", "react-templates-loader?targetVersion=0.14.7&modules=jsrt"]
},
],
},
};
I get the following output for template:
(function () {
function repeatExample1(example,exampleIndex) {
return React.createElement('button',{"key" : (example.scoped_id),"data-param" : "example_id","data-value" : (example.data.id),"className" : _.keys(_.pick({active: this.example && this.example.data.id === example.data.id}, _.identity)).join(" ") + " " + "btn btn-primary","onClick" : (this.setParam.bind(this)),"type" : "button"},(example.data.name))
}
return function(){
return React.createElement('div',{"id" : "layout"},React.createElement('h1',{},"Basic Layout Component"),((!this.state.example)?(React.createElement('div',{"className" : "alert alert-warning"},"\n Choose an example.\n ")):null),((this.state.example)?(React.createElement('div',{"className" : "alert alert-info"},"\n ",(this.state.example.introduce()),"\n ")):null),React.createElement.apply(this, ['div',{"className" : "btn-group","role" : "group"},_.map(this.examples,repeatExample1.bind(this))]))}}
)()
This is close to what we want, but of course React won't be defined. Alternatively, passing the modules=commonjs
flag to React Templates, I get the following result:
'use strict';
var React = require('react/addons');
var _ = require('lodash');
function repeatExample1(example, exampleIndex) {
return React.createElement(button, {
'key': example.scoped_id,
'data-param': 'example_id',
'data-value': example.data.id,
'className': _.keys(_.pick({ active: this.example && this.example.data.id === example.data.id }, _.identity)).join(' ') + ' ' + 'btn btn-primary',
'onClick': this.setParam.bind(this),
'type': 'button'
}, example.data.name);
}
module.exports = function () {
return React.createElement(div, { 'id': 'layout' }, React.createElement(h1, {}, 'Basic Layout Component'), !this.state.example ? React.createElement(div, { 'className': 'alert alert-warning' }, '\n Choose an example.\n ') : null, this.state.example ? React.createElement(div, { 'className': 'alert alert-info' }, '\n ', this.state.example.introduce(), '\n ') : null, React.createElement.apply(this, [
div,
{
'className': 'btn-group',
'role': 'group'
},
_.map(this.examples, repeatExample1.bind(this))
]));
};
This leads to a more general question, what needs to happen to load Javascript modules?
from babel-plugin-webpack-loaders.
Update 2
I've tried returning the various strings with a plugin:
module.exports = {yada: 'yada'};
// import result
{yada: 'yada'}
var yada = "yada";
module.exports = {yada: yada};
// import result
ReferenceError: yada is not defined
module.exports = 'Hello ' + ' world!';
// import result
'Hello world!'
module.exports = function(){ return 'yada' }
// import result
undefined
So for some reason, difficulty arises:
- when the returned source code does not set
module.exports
on the first line. - when
module.exports
is a function.
from babel-plugin-webpack-loaders.
I think of Ioaders as about resources in other languages, resources is just simple types like plain objects, strings, numbers. Not functions.
Webpack loaders allows you to return anything, I can't support all of variations users can return from their loaders. It just supports plugins I really use in my work. There are situations in which it is impossible to just replace require with module.exports.
This plugin was written in a few hours, and I really have no time to support all webpack plugins from community.
Any PRs are welcome.
from babel-plugin-webpack-loaders.
I see, and after reading the source code, it would be really unreasonable to expect you (or really anyone) to.
I think it makes sense to do what I want to do with a separate plugin. Thanks.
from babel-plugin-webpack-loaders.
@istarkov I have one question for you that would be a huge help. I'm not quite grasping how this plugin gains access to css files before Babel tries to parse it to AST.
For instance, when you call var css = require('example.css')
, normally this would throw a parse error when transpiling with Babel. How is it your plugin runs compiles this file before Babel does?
from babel-plugin-webpack-loaders.
As it is a babel plugin I could parse AST tree before any javascript will execute.
The main idea is in this line https://github.com/istarkov/babel-plugin-webpack-loaders/blob/master/src/plugin.js#L190
Any require (and import as import converted to require with other plugins) call which confirms this and some criteria below, processed and transformed by this plugin.
from babel-plugin-webpack-loaders.
Ok, this has nothing to do with your repo, so I'll close and leave this comment here for posterity. Thanks.
Trying to write another plugin that compiles html files, much as this one parses css files. However, I kept getting SyntaxError: Unexpected token
. The ES2015 preset was trying to work on the html file before my plugin compiled it. However, I was only getting this error some of the time (90% let's say).
I defined my visitor as follows:
module.exports = function (opts) {
return {
visitor: {
CallExpression: {
enter(path, opts) {
// do stuff to html
}
}
}
};
};
My problem is that plugin/preset order is not respected in Babel6 (see discussion) - though there is an experimental feature to try to resolve this: babel/babel#3281
What's weird though, is your repo doesn't have this issue - even after I bumped the babel-core
version in my repo to "^6.5.2", I still get this error sporadically.
from babel-plugin-webpack-loaders.
Related Issues (20)
- Quesiton: "ES" build for webpack 2 tree shaking compatibility HOT 13
- Missing documentation or context about being usable for backend purposes only HOT 14
- "Cannot find module" on Windows 10 HOT 4
- CSS Composes/from paths not resolved HOT 1
- Error: provided an invalid property of "config" HOT 4
- Does not run webpack loader on files imported from node modules HOT 1
- Error using worker-loader plugin HOT 3
- Cannot specify NODE_PATH HOT 2
- can't install the plugin with webpack 2 HOT 3
- Supporting additional webpack module api's HOT 3
- Can't resolve jsx files on despite of loader is present HOT 4
- Error SCSS file HOT 2
- NPM doesn't have correct github repo or latest release HOT 3
- Use loader-runnner instead of exec HOT 2
- Using with Webpack 2 (updated config) HOT 3
- License? HOT 2
- webpack 3? HOT 4
- Some webpack plugins are not run HOT 3
- Whitespace in Windows 10 path possible workaronud
- Weird ReferenceError when using a custom webpack loader HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from babel-plugin-webpack-loaders.