I'm using webpack in my app, and have babel converting my js/jsx files from es6 to es5.
I'd like to have babel convert the module loading in these files to AMD. I see how to do this with grunt-babel:
Using Babel to convert ES6 modules to ES5 AMD modules, not working as expected
How would I do this if I want webpack to handle the babel conversion?
For example, in webpack.config.js I have:
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel'
}
}
Can I set an option in there for Babel to use AMD?
You can set an options for babel with query key:
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
modules: 'amd'
}
}
}
For all available options take a look here: http://babeljs.io/docs/usage/options/
If you want to generate the whole bundle as AMD module, you can set it in the "output.libraryTarget" config:
{
output: {
libraryTarget: "amd"
}
}
See here, in "output.libraryTarget":
https://webpack.github.io/docs/configuration.html
Related
I have a Webpack 4 config file that compiles ES6 React code to ES5 using Babel (plus stage 3 preset and some optimisation plugins). It lints the code with Eslint.
import path from 'path';
export default {
mode: 'development',
entry: './app/app.jsx',
devtool: 'inline-source-map',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js',
publicPath: '/dist/js',
},
module: {
rules: [
{
enforce: 'pre',
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'eslint-loader',
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: ['es2015', 'stage-3', 'react'],
plugins: [
'babel-plugin-styled-components',
'transform-react-remove-prop-types',
'transform-react-inline-elements',
],
},
},
],
},
};
Now I want to add Flow type checking to my project but I can't find ANY good full examples of how a config setup like this should look.
I've tried adding eslint-plugin-flow to the Eslint config. I've tried adding babel-preset-flow to the Babel presets. I always end up getting errors either about needing an appropriate loader to handle the files, or it complains that my Flow code is invalid.
Note my config works before adding Flow. Can anyone show how to add Flow?
I've been using Reactjs.net with Visual Studio and it compiles .jsx files that contain class methods defined using arrow functions syntax...
class A {
m = () => {
}
}
I've set up Webpack with ES2017 preset but it's giving an "unexpected token" error for the equals sign after the method name.
Why doesn't this compile?
Here is the loader section from my config...
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2017', 'react']
}
}
]
}
I installed https://babeljs.io/docs/plugins/preset-stage-2/
And added 'stage-2' to the list of presets.
I worked out this solution after turning on and off the presets here with some sample code...
https://babeljs.io/repl
I am currently updating my nodejs packages and updated webpack to 3.5.5 and the build is now failing on trying to load css and sass. This is how my loaders look.
loaders: [
{test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel-loader']},
{test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/, loader: "file-loader" },
{test: /\.(jpe?g|png|gif)$/i, loader: 'file?name=[name].[ext]-loader'},
{test: /\.ico$/, loader: 'file?name=[name].[ext]-loader'},
{test: /(\.css|\.scss)$/, loaders: ['style-loader', 'css?sourceMap-loader', 'postcss-loader', 'sass?sourceMap-loader']},
]
I am wondering if I need to change anything so that these loaders will work?
The error I am getting is
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders. You need to specify 'css-loader' instead of 'css', see webpack.js.org/guides/migrating/… `
Now that webpack loaders must include the -loader prefix, the correct modification from css?sourceMap is not to css?sourceMap-loader but instead to css-loader?sourceMap.
Similarly, sass?sourceMap must become sass-loader?sourceMap.
In both cases, sourceMap acts in a similar way to a query string parameter in a URL, and the adjustment from css to css-loader is akin to a resource moving from example.com/css to example.com/css-loader.
I have a large project that I would like to divide up into multiple package.json's so that the dependencies for each part can be clearly stated and so those packages can be exported as individual parts.
However, I want my app to include each of these packages and compile them using webpack and babel. There are shared dependencies for the packages, so I don't want to just output each one to a /dist folder.
My ideal directory structure looks like this:
\main
\app
\node_modules
package.json
\package1
package.json
node_modules
index.js
\package2
package.json
node_modules
index.js
I tried multiple approaches:
Using webpack's resolve modules with something like path.resolve('app'). This just doesn't work, even though it should in theory.
Using main's package.json to reference others using "package1" : "file:../package1". This doesn't treat package1 as es6 javascript and throws errors. Using resolveLoaders in the webpack configuration does not help.
The webpack config I have is as follows.
module: {
loaders: [
{
test: /\.js?/,
loader: 'babel-loader',
include: [
path.resolve('app'),
path.resolve('../prose'),
],
query: {
plugins: [
['react-transform', {
transforms: [{
transform: 'react-transform-hmr',
// If you use React Native, pass 'react-native' instead:
imports: ['react'],
// This is important for Webpack HMR:
locals: ['module']
}]
}],
['transform-object-assign']
]
}
},
{ test: /\.css$/, loader: 'style-loader!css-loader!sass-loader' },
{ test: /\.svg$/, loader: 'file-loader' },
{ test: /\.png$/, loader: 'file-loader' },
{ test: /\.jpg$/, loader: 'file-loader' },
{ test: /\.json$/, loader: 'json-loader' }
]
},
resolve: {
modules: [
path.resolve('app'),
'node_modules',
],
extensions: ['.json', '.js', '.jsx'],
}
Any thoughts or examples of other projects that do this would be appreciated!
You should check out lerna. It enables you to use multiple package.jsons and even packages in one repo. It might help you with you requirements.
I have a project using Babel for Webpack, transpiling ES6 code into plain Js. This works perfectly well, including the imported classes etc, see below.
Result:
var _Person = __webpack_require__(2);
var vic = new _Person.person("Fred McIntire", "Web Developer");
vic.EchoProperties();
Webpack.config.js
module: {
loaders: [{
test: /\.js$/,
exclude: "/node_modules/",
loader: ['babel'],
query: {
presets: ['es2015']
}
}]
},
However while using Babel with Grunt in another project, hence "grunt-babel" plugin, I noticed it transpiles the imports into CommonJs by default and does not include the imported classes.
Result
var _Person=require("./modules/Person"),
vic=new _Person.person("Fred McIntire","Web Developer");
vic.EchoProperties();
gruntfile.js
babel: {
options: {
sourceMap: true,
presets: ['es2015'],
plugins: ['transform-es2015-modules-amd']
},
dist: {
files: {
'assets/js/transpiled/app.es6.js': 'assets/js/custom/app.js'
}
}
},
(I included "plugins: ['transform-es2015-modules-amd']" just for testing purposes).
I want the grunt-babel to transpile down to: (and include the imports)
var _Person = __webpack_require__(2);
not
var _Person=require("./modules/Person")
Therefore how do i update the gruntfile.js settings for grunt-babel in order to act in the same manner as it does used with Webpack?
Thanks in advance...