作者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/m.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