配置 webpack、babel 和 mithril.js
Configuring webpack, babel and mithril.js
我正在尝试让 webpack 和 babel 正常工作(我对两者都是新手)。当我 运行 时,webpack-dev-server 编译正常,但我导入的模块中的内容不起作用。以下是我如何配置我的项目:
// package.json
{
"name": "wtf",
"version": "1.0.0",
"description": "",
"scripts": {
"dev": "webpack-dev-server --open",
"start": "webpack -d --watch",
"build": "webpack -p",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.7.2",
"@babel/preset-env": "^7.7.1",
"babel-loader": "^8.0.6",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
},
"dependencies": {
"mithril": "^2.0.4"
}
}
// webpack.config.js
const path = require('path')
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'dist')
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
hot: true
},
module: {
rules: [
{
test: /\.js$/,
exclude: /\/node_modules\//,
use: { loader: 'babel-loader' }
}
]
}
}
// babel.rc
{
"presets": [
"@babel/preset-env"
],
"sourceMaps": true
}
应用程序是这样的:
const m = require('mithril');
import welcome from './ui/welcome.js';
var wtf = (function() {
return {
view: function(vnode) {
return m("div", [
m("div", welcome)
]);
}
}
})();
m.mount(document.body, wtf);
导入的welcome
模块在这里:
const m = require('mithril');
var welcome = (function() {
return {
view: function(vnode) {
return m("div", "welcome!");
}
}
})();
export default welcome;
当我运行 npm run dev
时,webpack-dev-server 编译代码没有错误或警告,并在空白页面上打开浏览器。探索代码这是我得到的:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<div>
<div view="function view(vnode) {
return m("div", "welcome!");
}"></div>
</div>
</body>
</html>
不明白为什么要这样解释模块,我错过了什么?
正如 Isaih Meadows 在评论中指出的那样。 node、webpack 和 babel 的新手我一直在寻找配置错误,我完全错过了我以错误的方式使用 mithril。要解决此问题,我只需将 index.js
更改为:
const m = require('mithril');
import welcome from './ui/welcome.js';
var wtf = (function() {
return {
view: function(vnode) {
return m("div", [
m(welcome)
]);
}
}
})();
m.mount(document.body, wtf);
我正在尝试让 webpack 和 babel 正常工作(我对两者都是新手)。当我 运行 时,webpack-dev-server 编译正常,但我导入的模块中的内容不起作用。以下是我如何配置我的项目:
// package.json
{
"name": "wtf",
"version": "1.0.0",
"description": "",
"scripts": {
"dev": "webpack-dev-server --open",
"start": "webpack -d --watch",
"build": "webpack -p",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.7.2",
"@babel/preset-env": "^7.7.1",
"babel-loader": "^8.0.6",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
},
"dependencies": {
"mithril": "^2.0.4"
}
}
// webpack.config.js
const path = require('path')
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'dist')
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
hot: true
},
module: {
rules: [
{
test: /\.js$/,
exclude: /\/node_modules\//,
use: { loader: 'babel-loader' }
}
]
}
}
// babel.rc
{
"presets": [
"@babel/preset-env"
],
"sourceMaps": true
}
应用程序是这样的:
const m = require('mithril');
import welcome from './ui/welcome.js';
var wtf = (function() {
return {
view: function(vnode) {
return m("div", [
m("div", welcome)
]);
}
}
})();
m.mount(document.body, wtf);
导入的welcome
模块在这里:
const m = require('mithril');
var welcome = (function() {
return {
view: function(vnode) {
return m("div", "welcome!");
}
}
})();
export default welcome;
当我运行 npm run dev
时,webpack-dev-server 编译代码没有错误或警告,并在空白页面上打开浏览器。探索代码这是我得到的:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<div>
<div view="function view(vnode) {
return m("div", "welcome!");
}"></div>
</div>
</body>
</html>
不明白为什么要这样解释模块,我错过了什么?
正如 Isaih Meadows 在评论中指出的那样。 node、webpack 和 babel 的新手我一直在寻找配置错误,我完全错过了我以错误的方式使用 mithril。要解决此问题,我只需将 index.js
更改为:
const m = require('mithril');
import welcome from './ui/welcome.js';
var wtf = (function() {
return {
view: function(vnode) {
return m("div", [
m(welcome)
]);
}
}
})();
m.mount(document.body, wtf);