作者brandyjohn (hailcpp)
看板Ajax
标题[问题] jsoneditor in webpack
时间Mon Aug 7 18:38:13 2017
各位版大好, 小弟刚学写网页,
最近接触webpack觉得非常方便,
但是又很容遇到设定上问题,(实在是又爱又恨)
这次遇到在使用jsoneditor 这个lib时遇到一些问题,
(
我用的lib是yarn安装後, 根据github上的指示,
https://github.com/josdejong/jsoneditor#custom-builds
build 出 jsoneditor.custom.js後放在 node_modules底下的jsoneditor根目录
这一动一直不确定对不对, 但是看到custom.js中有require(".src/xxxx")
就先这样放了
)
请各位大大不吝指导.
目录架构如下:
E:.
| .gitignore
| Jenkinsfile
| package.json
| webpack.config.js
| webpack.config.prod.js
| yarn.lock
|
+---app
| config.js
| configure.js
| index.groovy
| index.js
| model.js
| util.js
|
\---template
index.html
configure.js (使用的地方)
import {JSONEditor} from '../node_modules/jsoneditor/jsoneditor.custom';
...
editor = new JSONEditor(container, options, JSON.parse(jq(paramId).val()));
^^^^^^^^^^
之後有问题的地方
package.json
...
"scripts": {
"build": "webpack -p --progress --colors --profile "
},
"dependencies": {
"bootstrap": "^3.3.7",
"jquery": "^3.2.1",
"jsoneditor": "^5.9.3",
"select2": "^4.0.3"
}
...
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const extractTextPlugin = require('extract-text-webpack-plugin');
const uglifyJsPlugin = require('uglifyjs-webpack-plugin');
const cleanWebpackPlugin = require('clean-webpack-plugin');
const extractCSS = new extractTextPlugin(path.resolve(__dirname, 'dist',
'[name].css'));
const htmlWebpackPlugin = require('html-webpack-plugin');
// the path(s) that should be cleaned
let pathsToClean = ['dist']
// the clean options to use
let cleanOptions = {
verbose: true,
dry: false
}
module.exports = {
entry: {
cfgbundle: './app/configure.js',
cfgvendor: [
'jsoneditor'
]
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [{
test: /.jsx?$/,
include: [path.resolve(__dirname, 'app')],
exclude: [
path.resolve(__dirname, 'node_modules'),
path.resolve(__dirname, 'bower_components')
],
loader: 'babel-loader',
query: {
presets: ['env']
}
}, {
test: /\.css$/,
use: [
"style-loader", {
loader: "css-loader"
}
]
// { test: /\.css$/, use: extractCSS.extract({fallback: 'style-loader',
use:
// 'css-loader'})
}, {
test: /\.(jpg|png)$/,
loader: 'file-loader'
}, {
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff"
}, {
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
}]
},
resolve: {
extensions: ['.json', '.js', '.jsx', '.css']
},
devtool: 'source-map',
devServer: {
contentBase: "dist/"
},
plugins: [
new cleanWebpackPlugin(pathsToClean, cleanOptions),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
new webpack
.optimize
.CommonsChunkPlugin({
name: "cfgvendor",
minChunks: Infinity
}),
// extractCSS,
new htmlWebpackPlugin({
filename: 'index.html',
template: './template/index.html'
})
]
};
以上build完以後, deploy上去总是会产生
configure.js:62 Uncaught TypeError: n.JSONEditor is not a constructor
at HTMLDocument.<anonymous> (configure.js:62)
at d (jquery.js:3583)
at c (jquery.js:3651)
实在不知道为什麽...
请各位大大解救我於水火之中...
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 113.196.153.35
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Ajax/M.1502102297.A.06B.html
1F：→ freeccc: 我把jsoneditor npm install下来没有看到 08/09 17:00
2F：→ freeccc: ./node_modules/jsoneditor/jsoneditor.custom.js 耶 08/09 17:02
3F：→ freeccc: 喔喔我漏看你最前面有自己 build 的部分，不好意思 08/09 18:46
4F：→ freeccc: 如果改用 import JSONEditor from 'jsoneditor' 呢？ 08/09 18:47
5F：推 chatnoir: 我刚用楼上的写法是可以的，原po是不是误用{}？ 08/09 23:08
6F：→ brandyjohn: 我最後是用require来处理,我猜应该跟移除{}有一样效果 08/17 12:39
7F：推 dlikeayu: import 08/25 10:14